svg Path 路徑指令


PATH十種指令:

括號內為相應參數,詳細解釋見后文。

M = moveto(M X,Y)
L = lineto(L X,Y)
H = horizontal lineto(H X)
V = vertical lineto(V Y)
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)
T = smooth quadratic Belzier curveto(T ENDX,ENDY)
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)
Z = closepath()
注釋:
  坐標軸為以(0,0)為中心,X軸水平向右,Y軸水平向下。
  所有指令大小寫均可。大寫絕對定位,參照全局坐標系;小寫相對定位,參照父容器坐標系
  對於S,T指令,其X1,Y1為前一條曲線的X2,Y2的反射
  指令和數據間的空格可以省略
  同一指令出現多次可以只用一個

L H V指令
 M起點X,起點YL(直線)終點X,終點YH(水平線)終點XV(垂直線)終點Y
 如M10,20,L80,50,M10,20,V50,M10,20,H90

C指令——三次貝塞曲線
 C第一控制點X,第一控制點Y 第二控制點X,第二控制點Y曲線結束點X,曲線結束點Y

S指令
 S第二控制點X,第二控制點Y 結束點X,結束點Y

Q指令——二次貝塞曲線
 Q控制點X,控制點Y 曲線結束點X,曲線結束點Y
如M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25

T指令——映射
 T映射前面路徑后的終點X,映射前面路徑后的終點Y

A指令
 Elliptical Arc,允許不閉合。可以想像成是橢圓的某一段,共七個參數。
 RX,RY指所在橢圓的半軸大小
 XROTATION指橢圓的X軸與水平方向順時針方向夾角,可以想像成一個水平的橢圓繞中心點順時針旋轉XROTATION的角度。
 FLAG1只有兩個值,1表示大角度弧線,0為小角度弧線。
 FLAG2只有兩個值,確定從起點至終點的方向,1為順時針,0為逆時針
 X,Y為終點坐標
 如M0,25,A12.5,12.5,0,1,1,0,25.01Z表示一個圓心在(12.5,25),半徑為12.5的圓。其中起點和終點幾乎重合,用Z指令將它們閉合,注意終點不能填(0,25),那樣A指令是無法被解析的。

由以上介紹可以看出,手工繪制SVG路徑是相當復雜的。對於簡單的SVG圖形,一般只使用M,L,Q,A,Z五種指令完成。更復雜的圖形則必須要靠軟件來幫助完成,比如ADOBE ILLUSTRATOR。

https://www.w3.org/TR/SVG/paths.html


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com