5分鐘看懂svg path 路徑的全部命令（更有API解釋、有圖、有圖文對比解析）

友情提示：更多詳情、每一個命令的例子、參數變化對比圖文詳解，歡迎關注九十七度的博客：SVG《Path》命令詳解

M = moveto

M x y 移動到指定座標，xy分別爲x軸和y軸的座標點，相似畫筆的起點。

path中的起點，必須存在（文檔中雖然沒有提到過，可是path的其餘命令都須要依賴一個初始位置，而實際操做過程當中也沒有須要到能夠不使用M的狀況，後面發現有例外我再過來補充。

L = lineto

L x y 在初始位置（M 畫的起點）和xy肯定的座標畫一條線。
兩點一線，直線，繪圖中很常見的方式。

H = horizontal lineto

H x 沿着x軸移動一段位置

V = vertical lineto

V y 沿着y軸移動一段位置

C = curveto

C x1 y1 x2 y2 x y
三次貝塞爾曲線
當前點爲起點，xy爲終點，起點和x1y1控制曲線起始的斜率，終點和x2y2控制結束的斜率。

S = smooth curveto

S x2 y2 x y
簡化的貝塞爾曲線
1.若是S命令跟在一個C命令或者另外一個S命令的後面，它的第一個控制點，就會被假設成前一個控制點的對稱點。

2.若是S命令單獨使用，前面沒有C命令或者另外一個S命令，那麼它的兩個控制點就會被假設爲同一個點。

Q = quadratic Bézier curve

Q x1 y1 x y
二次貝塞爾曲線Q
只須要一個控制點，用來肯定起點和終點的曲線斜率。所以它須要兩組參數，控制點和終點座標。

T = smooth quadratic Bézier curveto

Q命令的簡寫命令。</br>
與S命令類似，T也會經過前一個控制點，推斷出一個新的控制點。
1.T命令前面必須是一個Q命令，或者是另外一個T命令

2.若是T單獨使用，那麼控制點就會被認爲和終點是同一個點，因此畫出來的將是一條直線

A = elliptical Arc

A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
rx 弧的半長軸長度
ry 弧的半短軸長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角，即x軸的逆時針旋轉角度，負數表明順時針旋轉角度。
large-arc-flag 爲1表示大角度弧線，0表示小角度弧線
sweep-flag 爲1表示從起點到終點弧線繞中心順時針方向，0表示逆時針方向。
xy 是終點座標。

Z = closepath

 從當前位置到起點畫一條直線閉合。

 友情提示：更多詳情、每一個命令的例子、參數變化對比圖文詳解，歡迎關注九十七度的博客：SVG《Path》命令詳解