svg

**1 由颜色值构成，矢量图，放大不失真；
2 不是h5新标签；
3 有属性，可以添加事件；
4 性能一般
**

• line

<svg width='600' height='600'>
      <line x1=' '  y1=' '  x2=' '  y2=' '  stroke='red'  stroke-width=' '></line>
</svg>

！！注意：svg绘制的图形的标签都写在svg标签里面；
除了坐标其他的属性可以写在css文件里面；
可以通过getStyle获取样式，通过getAttribute获取属性。

• 矩形

<rect width=' '  height=' '  x=' '  y=' ' fill=' '  fill-opacity=' '></rect>

• 圆形

<circle cx=' '  cy=' '  r=' '></circle>

• 椭圆

<ellipse rx=' '  ry=' '  cx=' '  cy=' '></ellipse>

• 路径

<path d='M100 100 L200 250 L300 100...Z'  stroke-lineCap=' '  stroke-lineJoin=' '></path>

！！注意：路径里面的M相当于canvas里面的moveTo()，L相当于lineTo()，Z相当于closePath().

• 文字

<text x=' '  y=' '>here is text</text>

• 创建svg标签

document.createElementNS('http://www.w3.org/2000/svg', '标签名')

！！注意：和普通创建元素不同，要写空间名和要创建的标签名字；
空间名固定，标签名为：line/circle/ellipse/path/rect等