友情提示:更多詳情、每個命令的例子、參數變化對比圖文詳解,歡迎關注九十七度的博客:SVG《Path》命令詳解
M = moveto
M x y 移動到指定坐標,xy分別為x軸和y軸的坐標點,類似畫筆的起點。
path中的起點,必須存在(文檔中雖然沒有提到過,但是path的其他命令都需要依賴一個初始位置,而實際操作過程中也沒有需要到可以不使用M的情況,后面發現有例外我再過來補充。
L = lineto
L x y 在初始位置(M 畫的起點)和xy確定的坐標畫一條線。
兩點一線,直線,繪圖中很常見的方式。
H = horizontal lineto
H x 沿着x軸移動一段位置
V = vertical lineto
V y 沿着y軸移動一段位置
C = curveto
C x1 y1 x2 y2 x y
三次貝塞爾曲線
當前點為起點,xy為終點,起點和x1y1控制曲線起始的斜率,終點和x2y2控制結束的斜率。
S = smooth curveto
S x2 y2 x y
簡化的貝塞爾曲線
1.如果S命令跟在一個C命令或者另一個S命令的后面,它的第一個控制點,就會被假設成前一個控制點的對稱點。
2.如果S命令單獨使用,前面沒有C命令或者另一個S命令,那么它的兩個控制點就會被假設為同一個點。
Q = quadratic Bézier curve
Q x1 y1 x y
二次貝塞爾曲線Q
只需要一個控制點,用來確定起點和終點的曲線斜率。因此它需要兩組參數,控制點和終點坐標。
T = smooth quadratic Bézier curveto
Q命令的簡寫命令。</br>
與S命令相似,T也會通過前一個控制點,推斷出一個新的控制點。
1.T命令前面必須是一個Q命令,或者是另一個T命令
2.如果T單獨使用,那么控制點就會被認為和終點是同一個點,所以畫出來的將是一條直線
A = elliptical Arc
A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
rx 弧的半長軸長度
ry 弧的半短軸長度
x-axis-rotation 是此段弧所在的x軸與水平方向的夾角,即x軸的逆時針旋轉角度,負數代表順時針旋轉角度。
large-arc-flag 為1表示大角度弧線,0表示小角度弧線
sweep-flag 為1表示從起點到終點弧線繞中心順時針方向,0表示逆時針方向。
xy 是終點坐標。
Z = closepath
從當前位置到起點畫一條直線閉合。
友情提示:更多詳情、每個命令的例子、參數變化對比圖文詳解,歡迎關注九十七度的博客:SVG《Path》命令詳解