svg Path 路徑指令

2021-07-14 04:38:57 字數 1479 閱讀 2951

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。

svg path 路徑的所有命令

m moveto m x y 移動到指定座標,xy分別為x軸和y軸的座標點,類似畫筆的起點。path中的起點,必須存在 文件中雖然沒有提到過,但是path的其他命令都需要依賴乙個初始位置,而實際操作過程中也沒有需要到可以不使用m的情況,後面發現有例外我再過來補充。l lineto l x y 在初始...

svg path屬性解釋

大寫字母 絕對定位 小寫字母 相對定位 所有點僅相對於起點 不了解貝塞爾曲線點這裡 m moveto m x y 移動到指定座標,xy分別為x軸和y軸的座標點,類似畫筆的起點。path中的起點,必須存在 文件中雖然沒有提到過,但是path的其他命令都需要依賴乙個初始位置,而實際操作過程中也沒有需要到...

1指令 檢視檔案安裝路徑

一 檢視檔案安裝路徑 whereis 由於軟體安裝的地方不止乙個地方,所以有必要找到安裝路徑。在終端輸入 whereis mysql mysql usr bin mysql etc mysql usr lib mysql usr lib64 mysql usr share mysql usr sha...