svg 中的 元素介紹

svg 路徑 元素

path 的屬性,2 個

d="path data" 路徑上點的座標
pathLength="<number>" 路徑總長度

example:
<path d="M 100 100 L 300 200 L 200 300 z"
style="fill:none;stroke;blue;stroke-width:5" />

M 表示移動到當前點 M 100 100 指將當前點移動到座標(100, 100) 的地方
L 表示繪製直線 "L 300 200" 指從當前位置(100, 100) 繪製直線到 (300, 200) 處
z 表示閉合路徑,首尾相連。

語法:
1. 座標指令和數據間的空格可以省略,如 "M 100 100 L 300 200 L 200 300 z" 等價於
"M100 100L300 200L200 300z"

2. 同一指令出現多次可以只使用一個 "M 100 100 L 300 200 L 200 300 z" 等價於
"M 100 100 L 300 200 200 300 z"

3. 命令名 大寫字母表示後面是絕對座標,小寫字母表示後面是相對座標。

4. 繪製水平或垂直線段時,可以使用 H 和 V 命令代替 L 。


橢圓圓弧曲線 A 或 a

語法是 "A rx ry x-axis-rotation large-arc-flag sweep-flag x y" 共 7 個參數

rx ,ry 是橢圓弧的半長軸,半短軸長度
x-axis-rotation 是此段弧所在的橢圓的 x 軸與水平方向的夾角,即 x 軸的旋轉角度
large-arc-flag 和 sweep-flag 決定了橢圓弧的繪製方向,值是 0 或 1
x,y 是橢圓弧終端座標
橢圓圓心是計算出來的,不需要指定
large-arc-flag 爲1 表示大角度弧線,0 代表小角度弧線
sweep-flag , 1 代表從起點到終點弧線繞橢圓中心順時針方向,0 代表逆時針方向
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章