SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令

目錄

SVG 學習<一>基礎圖形及線段

SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組

SVG 學習<三>漸變

SVG 學習<四> 基礎API

SVG 學習<五> SVG動畫

SVG 學習<六> SVG的transform

SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令

SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

SVG的path能夠理解外一支畫筆，由一連串的命令控制畫筆在SVG中繪製須要的形狀。

path經過屬性 d 來編寫畫筆命令。

命令說明：

其中 大寫命令座標是絕對位置，小寫命令座標是相對位置。

直線命令：

例（大寫命令）：

<path d="M10 10,L200 200,V50,H10,L10 10"/>

例（小寫命令）：

<path d="m10 10,l200 200,v50,h10,l10 10"/>

直線命令解析：

M/m：移動命令，也是基礎命令，幾乎path繪製開始都以M/m做爲第一個命令。

L/l：直線命令，鏈接上一個命令結束座標和該命令制定的新座標。

V/v：垂直直線命令，繪製垂直方向直線。

H/h：水平直線命令，繪製水平方向直線。

圓弧命令：

例：

<path d="M10 10,A100 100 0 0 0 100 100"/>

圓弧命令解析：

A/a: rx ry xr laf sf x y.

rx ry 定義圓弧橢圓的兩個半軸；

xr 定義圓弧橢圓旋轉角度；

laf sf 因爲符合兩點間的圓弧有4條，laf 決定取大角弧（1）仍是小角弧（0） ， sf決定取順時針弧（1）仍是逆時針弧線（0）；

x y 定義弧的終點；

下面四個效果就是改變 laf 和 sf 後的效果，其餘參數徹底同樣。