5分鍾看懂svg path 路徑的所有命令(更有API解釋、有圖、有圖文對比解析)


友情提示:更多詳情、每個命令的例子、參數變化對比圖文詳解,歡迎關注九十七度的博客: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》命令詳解

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM