svg path屬性解釋

2021-09-25 07:37:24 字數 1681 閱讀 3390

大寫字母:絕對定位

小寫字母:相對定位(所有點僅相對於起點)

不了解貝塞爾曲線點這裡

m = moveto

m x y 移動到指定座標,xy分別為x軸和y軸的座標點,類似畫筆的起點。

path中的起點,必須存在(文件中雖然沒有提到過,但是path的其他命令都需要依賴乙個初始位置,而實際操作過程中也沒有需要到可以不使用m的情況,後面發現有例外我再過來補充。

l = lineto

l x1,y1 x2,y2

l x1 y1 x2 y2

l x1 y1 在初始位置(m 畫的起點)和x2 y2確定的座標畫一條線。(起點到x1 y1也有一條直線)

兩點一線,直線,繪圖中很常見的方式。

h = horizontal lineto

h xlength

h x 沿著x軸移動一段位置 

v = vertical lineto

v ylength

v y 沿著y軸移動一段位置

c = curveto

c x1 y1 x2 y2 x y

三次貝塞爾曲線

當前點為起點,x y為終點,起點和x1 y1控制曲線起始的斜率,終點和x2 y2控制結束的斜率。

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命令的簡寫命令。

與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 路徑指令

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 curve...

Zoom屬性解釋

zoom屬性它是ie windows internet explorer 瀏覽器的專有屬性,ff 火狐firefox 等瀏覽器不支援。作用 可以設定或檢索物件的縮放比例。還有其他一些小作用,比如觸發ie的haslayout屬性,清除浮動 清除margin的重疊等。zoom的使用方法 zoom nor...

資源屬性解釋

dialog 對話方塊 icon圖示 stringtable version 行為 accept files 在edit control中,表示是否允許拉入文字。disabled 禁用,游標不能選定。ctrl d 設定游標自動順序 system modal 外加一圈效果 visible 是否可見 外...