2019年6月24日 星期一

SVG 的 Path(1)- 基本直線

在 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) 的水平線


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


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


最後的 Z 就是把曲線封閉起來,沒其他參數。


See the Pen
svg basic line
by deathhell (@deathhell)
on CodePen.




反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...