SVG路径PATH

在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具（FLASH里的钢笔工具比PS里的好用）

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