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来绑定事件。

不同的是：

1. 获取具体属性值时不能用点表示法（形如line.x1），只能用（line.getAttribute('x1')和line.setAttribute('x1','200')）,这样更接近于XML（看下面附图）
2. 创建svg元素的时候，不能用document.createElement('line'),要用document.createElementNS('http://www.w3.org/2000/svg','line'),其实document.createElement是document.createElementNS('http://www.w3.org/1999/html','div')的简写而已
3. 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>