SVG路径PATH
PATH用到的指令：
M----（X Y）：移动到
Z----(none)：关闭路径
L----（X Y）：画线到
H----(X)：水平线到
V----(Y)：垂直线到
C----(X1 Y1 X2 Y2 X Y)：三次贝塞尔曲线
S----(X1Y1 X Y)：光滑三次贝塞尔曲线到
Q----(X1 Y1 X Y)：二次贝塞尔曲线到
T----(X Y)：光滑二次贝塞尔曲线到
A----(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+：椭圆弧
R----(X1 Y1(X Y))：Catmull-Rom曲线
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
-----------------------------------------------------------------------------------------------
先创建一个AVG画布
定义样式：
<style>
.svgStyle{
border: solid 1px #000000;
margin: 0 auto;
display: block
}
.pathStyle{
stroke:#000000;
stroke-width:5px;
fill:none
}
</style>
创建SVG：
<svg width="1200px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgStyle">
<path d="M 0 300 " class="pathStyle" />
</svg>
M：开始画线的起点坐标。
-------------------------------------------------------------------------------------------------------------------------------
L----（X Y）+：画线到：
<svg width="1200px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgStyle">
<path d="M 10 300 L 100 300 L 50 400" class="pathStyle" />
</svg>
即:从坐标（0，300）开始画线到坐标（100，300）再画线到坐标（50，400）
---------------------------------------------------------------------------------------------------------------------
Z----(none)：关闭路径：
<path d="M 10 300 L 100 300 L 50 400 Z" class="pathStyle" />
即：闭合路径--自动从最后一个点和起点之间连一条线
--------------------------------------------------------------------------------------------------------
H----(X)+：水平线到
<path d="M 10 300 H 400" class="pathStyle" />
即：根据前一个一点，水平方向画一条线，只要一个X坐标。
----------------------------------------------------------------------------------------------------------------
V----(Y)+：垂直线到
与H同理：垂直画线
-----------------------------------------------------------------------------------------------------------------
C----(X1 Y1 X2 Y2 X Y)+：三次贝塞尔曲线：
<path d="M 10 300 C 100 200 200 400 400 300 C 500 100 550 500 600 300" class="pathStyle" />
啊吖！红线画得实在太丧心病狂。。
总之实际应用的时候，我们的目的图形肯定是由多个直线或者曲线组成的，而C的两个坐标中，第一个坐标就是对相对当前线段的起点进行弯曲，第二个坐标则是相对当前线段的末尾点进行弯曲。
---------------------------------------------------------------------------------------------------------------------
S----(X1 Y1 X Y)+：光滑三次贝塞尔曲线到
单独使用S：
<path d="M 0 300 S 200 500 400 300 S 600 500 800 300" class="pathStyle" />
跟M结合：<path d="M 10 300 C 100 200 200 400 400 300 S 600 500 1000 300" class="pathStyle" />
（S属于三次贝塞尔曲线，所以跟他配合使用的也要用三次贝塞尔曲线，如M）
S只要一个控制点，这个控制点会控制当前线的前后点进行平滑，类似于两个C的两个点合在一起了。
当S和其它指令结合的时候，他会自动将当前的线段和上一线段进行平滑。就好像如图所示自动加一条控制线---绿色的线
就是好是使用钢笔工具连接描点的时候，没有转换点。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Q----(X1 Y1 X Y)+：二次贝塞尔曲线到
<path d="M 0 300 Q 200 500 400 300 Q 600 500 800 300" class="pathStyle" />
如图。跟S很像，一个控制点当两个用，跟S的区别在于两线段之间不会平滑过渡。
--------------------------------------------------------------------------------------------------------------------------------------------------
T----(X Y)：光滑二次贝塞尔曲线到
<path d="M 0 300 Q 300 0 600 300 T 1000 50" class="pathStyle" />
功能跟S是一样的，T也是将两个线段自动进行平滑
(T是二次贝塞尔曲线，所以跟它配合使用的也要用二次贝塞曲线，如Q)
------------------------------------------------------------------------------------------------------------------------------------------
A----(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+：椭圆弧
rx：椭圆水平方向的半径
ry：椭圆垂直方向的半径
x-axis-rotation：X轴的旋转角度，即椭圆绕起始点顺时针旋转的角度
large-arc-flag：此参数有两个值，分别为0和1。0代表小角度弧线，1代表大角度弧线；
sweep-flag：此参数也有两个值，分别为0和1。1代表从起点到终点弧线绕中心顺时针方向，0代表逆时针方向、1代表顺时针方向；
x，y：弧线的终端坐标。
<path d="M 500 300 A 100 200 0 0 1 700 300"></path>
先画个半个椭圆：
x-axis-rotation和large-arc-flag：这里旋转45度
<path d="M 500 300 A 100 200 45 0 1 700 300"></path>
蓝色线是我标上去的，为了好理解
--------------------------------------------------------------------------------------------------------------------------------------
R----(X1 Y1(X Y))：Catmull-Rom曲线 还不会 暂且搁置
---------------------------------------------------------------------------------------------------------------------------------------
总结：
（1）路径的坐标与坐标之间可以用空格分隔，也可以用逗号分隔，如 <path d="M 0 0 L 100 0 L50 100 Z M300,300 L400,300 L350,400 Z">
（2）命令使用大写，意味着点是相对两个SVG画布进行绝对定位的。如果命令使用的是小写，这意味着此命令定义的坐标和前面的当前位置是相对的
（3）C跟S配合使用，Q和T配合使用。
（4）S和T会将两个线段的连接自动平滑
参考:http://weick.iteye.com/blog/677986