svg动画的学习

svg的animate标签IE浏览器兼容性差，用css来实现有局限性，所以js来实现好一些，有一个框架snapsvg.js很好用，不过再vue使用过程中没有正确引入。不知道为什么。

所以还是决定不要引入框架了，用js+path实现动画效果。

第一步： 了解svg，是一种xml格式的矢量图，操作起来有点像convas，目前好像比较流行，具体细节不深挖了，先用起来再说。

我这里就是在html直接使用，至于其他使用方法，可去网址上学习。

这里主要是对svg的path的学习

上面例子是对弧线也就是A指令学习的一个过程，从第一个svg尝试画弧度，第二个图理解，第三个图是我要的效果。

A指令： A 半径 半径 倾斜度 大角度/小角度 顺时针/逆时针 终止x坐标 终止y坐标 

中要有开始位置（x,y) 终止位置(x2,y2)这两点间画弧度，一边起始点就是M指令的点或者上一个指令的结束点，

A（半径，半径）两个半径分别是X，Y，这样可以画椭圆。

接下来（倾斜角度，大角度/小角度，顺时针/逆时针）参考第二个svg，有两个弧度，第二个是倾斜45度后的。

大角度小角度，弧形就是圆的一部分，小角度小弧形，大角度大弧形，第一个svg就是半径加大的效果，这里是小角度，改成大角度改成1就可以了，

顺时针/逆时针 0/1 可以决定你圆是上半部分还是下半部分。

再就是终点了没什么好所的，如果圆的半径*2小于起始点和终点的距离，会画出一个半圆，半径=起点到终点距离/2.

所以起点和终点位置很重要。公司要的是图表的效果中间蓝色显示数据百分比。用js来控制的，

var path3 = document.getElementById("path3");

path3.setAttribute("d", temp3);

用起来和html标签一样好用，对path d属性设置就可以了，temp3是字符串。根据数据确定目标位置，去画就可以了。

以下是我学习参考的网址，在这里对他们表示感谢！大家也可参考学习下。

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths比较详细的介绍，还有一些少有的弧形的介绍，这是我想要的

http://blog.csdn.net/chromium_webkit/article/details/28271081 path中A命令

https://www.oschina.net/code/snippet_170216_54737 画圆弧的动画

http://www.jianshu.com/p/394d8955eed5 path路径动画实例

https://segmentfault.com/a/1190000005053782 C指令的学习

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths 这里进一步对弧形和A标签进一步了解。