svg：矢量图

　　canvas：用于绘制位图

　　svg：使用xml格式绘制图形

　　svg：要有一个根节点，标签就相当于html

　　svg 命名空间  xmlns="http://www.w3.org/2000/svg"  版本 version="1.1"

　　svg如果不设置大小，默认占用位置 300x150

　　定义矩形：rect标签，必填的两个属性 width height

　　rect的属性：

　　　　width：宽

　　　　height：高

　　　　x：x轴坐标；

　　　　y：y轴坐标；

　　　　rx：边框圆角；

　　　　style="fill;red"：样式属性

　　　　fill：填充颜色

　　　　stroke-width：边框宽度

　　　　stroke：边框颜色

　　　　fill-opacity：填充透明度

　　　　stroke-opacity：边框透明度；

　　　　opacity：同时定义填充和边框的透明度

　　定义圆：circle标签

　　　　属性：

　　　　　　cx：定义x轴坐标

　　　　　　cy：定义y轴坐标

　　　　　　r：半径

　　　　　　style="fill;red"：样式属性

　　　　　　fill：填充颜色

　　　　　　stroke-width：边框宽度

　　　　　　stroke：边框颜色

　　　　　　fill-opacity：填充透明度

　　　　　　stroke-opacity：边框透明度；

　　　　　　opacity：同时定义填充和边框的透明度

　　定义椭圆：ellipse标签

　　　　属性：

　　　　　　cx：定义x轴坐标；

　　　　　　cy：定义y轴坐标；

　　　　　　rx：定义x轴半径；

　　　　　　ry：定义y轴半径；

　　　　　　style="fill;red"：样式属性

　　　　　　fill：填充颜色

　　　　　　stroke-width：边框宽度

　　　　　　stroke：边框颜色

　　　　　　fill-opacity：填充透明度

　　　　　　stroke-opacity：边框透明度；

　　　　　　opacity：同时定义填充和边框的透明度

　　绘制直线的标签：line

　　　　属性：

　　　　　　x1：起始坐标 x 轴

　　　　　　y1：起始坐标 y 轴

　　　　　　x2：结束坐标 x 轴

　　　　　　y2：结束坐标 y 轴

　　定义多边形：polygon标签

　　　　属性：

　　　　　　points：用于定义写多边形角的坐标，

　　　　　　案例：points="20,12 50,45 30,60"

　　　　　　fill-rule：奇偶判断；

　　折线：polyline标签：由直线绘制路径

　　　　属性：

　　　　　　points：同polygon标签；

　　路径：path，分大小写，大写代表绝对 ，小写代表相对；

　　　　属性：

　　　　　　d：多个属性的集合

　　　　　　M：代表起始点 moveTo

　　　　　　L：代表领点 lineTo

　　　　　　Z：代表 closePath；

　　　　　　案例：d="M100,30 L200,20 Z";