iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
1

SVG-path(一)

昨天介紹了各種基本形狀,今天要來介紹SVG強大的形狀元素<path>

<path>基本概念

  • 屬性
屬性名稱 說明
d 路徑指令,指令+參數的序列組成
transform 路徑的變形效果
  • <path>有各種的指令可以使用,只要用很少的點就可以做出平滑的曲線
  • 每種指令有兩種表達方式,大寫指令表示絕對定位;小寫指令表示相對定位(相對於上個點)
  • 使用最初用戶坐標系統,左上角為(0,0)座標點,座標預設以像素為單位,x軸正方向是向右,y軸正方向是向下
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

<path>指令

接下來來介紹指令,每個命令都用一個關鍵字代表,大寫指令表示絕對定位;小寫指令表示相對定位

指令 意思 參數 說明
M/m moveto x y 起始點的(x,y)座標
Z/z closepath / 封閉路徑,將當前座標跟第一個座標連起來
直線指令 / / /
L/l lineto x y 從當前座標畫直線到路徑終點的(x,y)座標
H/h horizontal lineto x 從當前座標畫水平線到路徑終指定的x軸座標
V/v vertical lineto y 從當前座標畫垂直線到路徑終指定的y軸座標
曲線指令 / / /
C/c curveto x1 y1 x2 y2 x y 從當前座標畫曲線到曲線終點的(x,y)座標,(x1,y1)及(x2,y2)為控制點
S/s smooth curveto x2 y2 x y 從當前座標畫反射曲線到曲線終點的(x,y)座標,(x2,y2)為反射控制點
Q/q quadratic Bézier curve x1 y1 x y 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,(x1,y1)為控制點
T/t smooth quadratic Bézier curveto x y 從當前座標畫二次貝茲曲線到曲線終點的(x,y)座標,前一個座標為反射控制點
弧形指令 / / /
A/a elliptical Arc rx ry x-axis-rotation large-arc-flag sweep-flag x y 從當前座標畫弧形到指定的(x,y)座標,rx=橢圓形的x軸半徑 ry=橢圓形的y軸半徑,x-axis-rotation=弧線與x軸的旋轉角度,large-arc-flag:(1=最大角度的弧線;0=最小角度的弧線),sweep-flag:方向(1=順時針方向;0=逆時針方向)

[補充]

在SVG中,值不一定要具有單位。沒有單位的值,就會在用戶座標系中使用用戶單位,預設就會使用px為其單位。(SVG座標系統)
也可以使用其他單位。SVG支援的單位還包含em、ex、px、pt、pc、cm、mm、in和百分比。

明天會詳細介紹各指令,而複雜的A指令會再另外介紹一篇~
今天是漫長的一天,希望能不中斷繼續寫下去~

~SVG龜速學習中,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
[2]https://www.w3schools.com/graphics/svg_path.asp
[3]https://www.oxxostudio.tw/articles/201410/svg-tutorial.html
[4]https://andyyou.github.io/2017/03/17/svg-coordinate-1/


上一篇
SVG-Tag&形狀
下一篇
SVG-path(二)指令
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言