svg标签
在页面上画图无非有两种方法，一种是canvas，另外一种就是svg了，canvas之前已经介绍过了，现在来介绍一下svg吧。
其实早在svg出现以前几年，微软已经推出了类似的东西，叫做vml，早期是为了使excel的图形转化为网页来展示而做的，但是由于过早的创新，当时并不被大家接受，后来svg出现，大家开始对这种“工具”产生兴趣，vml才重新被大家发现。（这个故事告诉大家，过早的创新也容易失败，因为每一种新生事物的出现都应该在大家能接受的范围以内，超出大家的认知太多，就不容易被大家接受了，人类都是恐惧新事物的~~）
svg标签写法：
<svg width="800" height="600"> <line x1="100" y1="100" x2="300" y2="400"></line> </svg>
先做一个比较：
canvas:性能高，但是交互不方便
svg/vml：性能相对较低（特别在图形多的时候会更明显），但是实现交互和一般的html元素是一样的，可以实现onxxxx和addEventListener来绑定事件，进行交互~~
svg的用法和html元素类似，可以用css改变其某些样式（stroke,stroke-width,fill）,可以通过dom获取svg元素，可以实现onxxxx和addEventListener来绑定事件。
不同的是：
- 获取具体属性值时不能用点表示法（形如line.x1），只能用（line.getAttribute('x1')和line.setAttribute('x1','200')）,这样更接近于XML（看下面附图）
- 创建svg元素的时候，不能用document.createElement('line'),要用document.createElementNS('http://www.w3.org/2000/svg','line'),其实document.createElement是document.createElementNS('http://www.w3.org/1999/html','div')的简写而已
- svg属性只有css属性才能受transition动画影响，如果用js改变其他属性（例如circle的r）,不会有过渡动画(但是chrome实现了，其他例如ff没有实现)，只能自己写（setInterval或者requestAnimationFrame）
svg的几种简单的写法：
1.线 line 2.矩形 rect 3.圆 circle 4.椭圆 ellipse 5.多线 polyline 6.多边形 polygon
<svg width="800" height="600"> <line x1="50" y1="50" x2="100" y2="100"></line> <rect x="150" y="150" width="100" height="50" rx="50" ry="10"></rect> <circle cx="220" cy="80" r="40"></circle> <ellipse cx="400" cy="100" rx="100" ry="50"></ellipse> <polyline points="550,50 680,80 650,180 600,200 540,100"></polyline> <polygon points="550,250 680,280 650,380 600,400 540,300"></polygon> </svg>
值得注意的是圆和椭圆的圆心是cx，cy不是x,y，矩形和椭圆都有rx和ry。
svg最厉害的无疑是path了
掌握常用的指令： M(moveTo)、L(lineTo)、A(画弧)、Z(封闭路径)
M和L后面跟的都是点坐标，Z后面没有参数，
A的参数就比较复杂： 横半径 纵半径 x轴旋转 大弧标志 镜像标志(如果是1，取起点到终点连线的左边) 终点x 终点y
举个栗子：
<path d=" M 300,300 L 300,150 A 150,150,0,0,1,357,161 Z "></path>
