SVG 之 path

可缩放矢量图形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为逆时针ÿ