<path> 是個很特別的標籤，可以搭配不同的指令畫出各種路徑線圖。
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 50 150 C 50 0 250 0 250 150 H 500" style="fill:none;stroke:black;stroke-width:2;" /> </svg> |
路徑的部份要設定在 d 屬性中!
path 的指令有：
| 指令 | 參數 | 指令說明 |
|---|---|---|
| M | x y | 起始點的 x, y 座標(moveto) |
| L | x y | 從目前點的座標畫直線到指定點的 x, y 座標(lineto) |
| H | x | 從目前點的座標畫水平直線到指定的 x 軸座標(horizontal lineto) |
| V | y | 從目前點的座標畫垂直線到指定的 y 軸座標(vertical lineto) |
| C | x1 y1 x2 y2 x y | 從目前點的座標畫條貝茲曲線到指定點的 x, y 座標：其中 x1, y1 及 x2, y2 為控制點(curveto) |
| S | x2 y2 x y | 從目前點的座標畫條反射的貝茲曲線到指定點的 x, y 座標：其中 x2, y2 為反射控制點(smooth curveto) |
| Q | x1 y1 x y | 從目前點的座標畫條二次貝茲曲線到指定點的 x, y 座標：其中 x1, y1 為控制點(quadratic Bézier curve) |
| T | x y | 從目前點的座標畫條反射二次貝茲曲線到指定點的 x, y 座標：以前一個座標為反射控制點(smooth quadratic Bézier curveto) |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 從目前點的座標畫個橢圓形到指定點的 x, y 座標：其中 rx, ry 為橢圓形的 x 軸及 y 軸的半徑，x-axis-rotation 是弧線與 x 軸的旋轉角度，large-arc-flag 則設定 1 最大角度的弧線或是 0 最小角度的弧線，sweep-flag 設定方向為 1 順時針方向或 0 逆時針方向(elliptical Arc) |
| Z | 關閉路徑，將目前點的座標與第一個點的座標連接起來(closepath) |
指令同時也區分大小寫，大寫表示座標是使用絕對座標，小寫則是用相對座標。
加上各種指令後：
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M 50 150 Q 250 100 250 150 T 450 150" style="fill:none;stroke:red;stroke-width:5;" /> </svg> |
指令跟座標間的空格是可以省略的，所以這樣也是一樣的效果：
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M50 150Q350 50 300 150T450 150" style="fill:none;stroke:red;stroke-width:5;" /> </svg> |
筆者將 path 的屬性整理成一個簡單的表格：
path 屬性
| 屬性名稱 | 屬性說明 |
|---|---|
| d | 路徑指令 |
| transform | 路徑的變形效果，類似 css 中的 transform |