在使用之前建議下個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