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

 

 

 

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