SVG 的 Path(1)- 基本直線

分享:
標籤: SVG

在 SVG 裡我們使用 path 來繪製線條,因為 path 很複雜,所以只要搞懂 path 應該就能理解大多數 svg 線條的方式了。

SVG Path 的指令包含如下:

M = 起始點,後面的數字表起始點座標
L = 下一個指定的點,後面的數字 x, y 代表點的座標
H = 表示水平線下一個點的 x 軸位置
V = 表示水平線下一個點的 y 軸位置
C = 從目前的點到下一個點的座標,可以用中間的值改變曲線的曲率
S = 從目前點的座標畫條鏡射的貝茲曲線到指定點的 x, y 座標
Q = 就是起點跟終點共用一個控制點
T = 從目前點的座標畫條反射二次貝茲曲線到指定點的 x, y 座標:以前一個座標為反射控制點
Z = 關閉曲線

來看一下範例,如果是一開始設置起點
像這樣就可以畫一條 (0,0) 到 (0,50) 的水平線

<path d="M0 0 H50" stroke="black" stroke-width="4px">
</path>

把 H 改成 V 就是畫一條垂直線。


使用 L 則可以連接到下一個點,並不斷連接下去。

<path d="M0 0 L50 50" stroke="black" stroke-width="4px">
</path>

 

最後的 Z 就是把曲線封閉起來,不用設定其他參數。

<path d="M0 0 L50 50 L100 50 L200 10 Z" stroke="black" stroke-width="4px" fill="none">
</path>

 

以下則是上面幾個範例的結果: