可缩放矢量图形SVG是基于可扩展标记语言……吧啦吧啦（百度百科上的定义嗯）
最近刚刚忙完我们队的一个项目的网站，里面虽然主要用的不是svg，只是很小的一个效果用到了，但是用的时候查阅一下资料啥的感觉像是打开了新世界的大门（可能是太菜的缘故之前都没怎么用过svg）
所以想总结一下关于svg里面的path以及animate用法以及自己的体会
例子
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
这里svg就是一个类似于画布的东西，path中最核心的属性就是 “d” 属性，这个属性就像一个虚拟的画笔，根据属性值来绘制图形，上面例子详情：先将画笔移动到svg画布的(150,0)位置，然后画直线（L代表LineTo）到终点(75,200)，再画直线到(225,200)。
d属性预览表
| 画笔操作 | 参数 | 例子 | 解释 |
|---|---|---|---|
| M | x,y | M150 40 | 画笔移动到画布上一点，位置由M后面的两个数值决定 M150 40 移动到座标(150,40) |
| L | x,y | L250 0 | 画直线到画布上某一点，直线终点位置由L后面的两个数值决定L250 0 画直线到点(250,0) |
| H | x | H50 | 画水平直线，H50 纵座标不变，从当前座标画水平线到横座标为50处 |
| V | y | V200 | 画竖直直线，V50 横座标不变，从当前座标画竖直线到纵座标为50处 |
| C | x1,y1,x2,y2,x,y | 三次贝塞尔曲线(三次需要两个控制点(x1 y1 x2 y2)和一个曲线终点(x y)) | |
| S | x2,y2,x,y | 光滑的三次贝塞尔曲线 | |
| Q | x1,y1,x,y | 二次贝塞尔曲线(二次需要一个控制点和一个曲线终点) | |
| T | x,y | 光滑的二次贝塞尔曲线 | |
| A | rx,ry,x-rotation,flag1,flag2,x2,y2 | 椭圆曲线，rx,ry代表椭圆的两个半轴长，如果想要画圆就将这两个参数设置相等（居然还能记得专业名词不容易2333） x-rotation代表弧线绕x轴的旋转角度 flag1表示从起始点到终点是画大角度弧，还是小角度（1为大角度，0为小角度） flag2表示画弧的方向是顺时针还是逆时针（1为顺时针，0为逆时针） x2,y2表示弧线的终点 表格后面会给出例子 |
|
| Z | 无参数 | 结束次路径的绘制 |
注：小写字符的指令参数和大写字母是一样的，只是后面的参数不是画布上的绝对座标，而是相对于画笔当前的位置在x和y轴上移动的距离
椭圆例子
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M60,60 A30,30 0 0,0 85,85"
style="stroke: yellow; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 1,0 85,85"
style="stroke: red; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 1,1 85,85"
style="stroke: green; stroke-width:2; fill:none;"/>
<path d="M60,60 A30,30 0 0,1 85,85"
style="stroke: blue; stroke-width:2; fill:none;"/>
</svg>
首先圆上两点确定，半径确定，能且只能确定两个圆，再由两点连线分隔就是四个圆弧，上面代码一共四条路径，也是四条弧线，首先因为rx和ry都是一样的，所以是正圆弧，x-rotation都是0，主要在于flag1和flag2取不同值的效果，都是从点(60,60)到(85,85)的圆弧，
- 第一个path黄色的小圆弧，flag1=0，flag2=0，小角度弧，逆时针
- 第二个path红色的小圆弧，flag1=1，flag2=0，大角度弧，逆时针
- 第三个path绿色的小圆弧，flag1=1，flag2=1，大角度弧，顺时针
- 第四个path蓝色的小圆弧，flag1=0，flag2=1，小角度弧，顺时针
贝塞尔曲线
比较懒，这是百度百科上面的关于贝塞尔曲线的公式讲解，咱就只看到三次的好了，通用的太复杂嗯
每个公式里面的P0、P1、P2这些都是对应上面提到的path的d属性中的n次贝塞尔曲线变换（C，S，Q，T）的参数里面的x1，y1，x2，y2，x，y以及画贝塞尔曲线之前画笔所在的位置（即贝塞尔曲线起始位置），每个点的横座标代入求出点B的横座标（纵座标同理）
咳咳，不过，不管作为一个设计还是前端，估计都很难直接用公式来看曲线样式嗯，所以上面这公式都不重要
下面主要总结一下path d属性中的C，S，Q，T几种贝塞尔曲线
C，S 三次贝塞尔曲线
图上的(x1,y1)，(x2,y2)，(x,y) 就是对应与C（Cx1 y1 x2 y2 x y）里面的参数一一对应，(x0,y0)是执行C指令之前画笔的位置
S也是三次贝塞尔曲线，但是其参数比C少了一个点，这是因为，S必须在C指令后面使用，C画了(x0,y0)到到(x1,y1)的部分，S会自动把C的(x2,y2)关于(x,y)做中心对称，对称点就是上图右下角的那个点，该点作为S的(x1,y1)，所以后面S的参数只需要指明x2 y2 x y就可以了（接着上面的C的效果画的S的效果见下图）
Q，T 二次贝塞尔曲线
二次贝塞尔曲线Q T 其实看起来就相当于把三次贝塞尔曲线的两个控制点合二为一
图上的(x1,y1)，(x,y) 就是与Q（Qx1 y1 x y）里面的参数一一对应T也是二次贝塞尔曲线，但是其参数比Q少了一个点，这是因为，T必须在Q指令后面使用，T会自动把Q的(x1,y1)关于(x,y)做中心对称，对称点就是上图右下角的那个点，该点作为T的(x1,y1)，所以后面T的参数只需要指明x y就可以了（接着上面的Q的效果画的T的效果见下图）
animate标签
animate 标签包裹在path line text 等可以进行动画的元素内部，通过改变外部包裹元素的某些属性来产生动画
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-size="30" y="60" x="0">
这个会左右移动嗯
<animate attributeName="x" from="0" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>上面这个例子是“这个会左右移动嗯”这几个字的横座标从0变为60的动画，历时3秒，并且会一直不断重复。
animate标签的属性
- attributeName
指定了animate修改的是动画元素的哪个属性，上面例子中就是指定改变text 的x属性即横座标 - from
指定属性变化的初始值，例如例子中横座标初始值是0，也就是从0开始变化 - to
指定属性变化的终止值，例子中横座标变化到最大值为60 - begin
指定动画开始时间，即从svg加载完成开始算 - dur
动画执行过程需要的时间，也决定了动画的快慢 - end
动画结束的时刻