SVG基础/SVG画饼图

SVG基础

1.SVG是矢量图
2.SVG性能不如canvas
3.SVG虽然是标签，不是HTML——SVG标准
4.SVG不可以使用CSS3属性

SVG中决定图形形状的属性不可以放到样式中;例如坐标点,半径,等
SVG中决定视觉效果的属性可以放样式;例如长宽高颜色、stroke、fill
--------------------------------------------------------------------------------
style优先级:
    属性<*<标签 //线
     //矩形
     //圆
     //椭圆

样式属性：
    stroke        边线颜色
    stroke-width  线宽
    fill          填充

--------------------------------------------------------------------------------
路径操作：
    
    M == moveto 参数：x y
    L == lineto 参数：(x y)+可以有多组,即代表多个lineto
    A == arc    参数：rx ry 旋转 大弧标志(0、1,0为两个点之间画弧,1为连个点之间以圆心画弧) 镜像标志(0代表圆弧在起点左侧,1代表在右侧;) 终点x 终点y
    Z == 闭合路径
    Q == 使用4次贝塞尔曲线时的控制点 M x y Q x y x y
    等等等...详见SVG官网
--------------------------------------------------------------------------------
处理兼容问题Raphael.js、SVG、VML
    VML兼容IE4.0~IE7.0
    IE8不兼容.
    SVG兼容IE9.0~、Chrome、FF、其他高级浏览器
    兼容——Raphael.js

SVG画饼图

扩展

ev.srcElement;功能类似ev.target;获取鼠标当前所在的DOM对象