天天看點

svg中path标簽的用法

除了上次的六個普通标簽之外,SVG還支援複雜的路徑标簽:path

使用path标簽時,就像用指令的方式來控制一隻畫筆,比如:移動畫筆到某一坐标位置,畫一條線,畫一條曲線,完事了擡起畫筆,OVER!

path支援的指令有:

M = moveto(M X,Y) :将畫筆移動到指定的坐标位置

L = lineto(L X,Y) :畫直線到指定的坐标位置

H = horizontal lineto(H X):畫水準線到指定的X坐标位置

V = vertical lineto(V Y):畫垂直線到指定的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軸水準向下。

所有指令大小寫均可。大寫絕對定位,參照全局坐标系;小寫相對定位,參照父容器坐标系

指令和資料間的空格可以省略

同一指令出現多次可以隻用一個

二、指令

1、L H V指令

M 起點X,起點Y L(直線)終點X,終點Y H(水準線)終點X V(垂直線)終點Y

如:M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90

svg中path标簽的用法

2、A指令

允許不閉合。可以想像成是橢圓的某一段,共七個參數:

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

RX,RY指所在橢圓的半軸大小

XROTATION指橢圓的X軸與水準方向順時針方向夾角,可以想像成一個水準的橢圓繞中心點順時針旋轉XROTATION的角度。

FLAG1隻有兩個值,1表示大角度弧線,0為小角度弧線。

FLAG2隻有兩個值,确定從起點至終點的方向,1為順時針,0為逆時針

X,Y為終點坐标

如:m 200,250 a 150,30 0 1 0 0,70

svg中path标簽的用法

寵辱不驚,看庭前花開花落;去留無意,望天上雲卷雲舒

繼續閱讀