SVG是什么
可縮放矢量圖形(Scalable Vector Graphics),一種用來(lái)描述二位矢量圖形的XML標(biāo)記語(yǔ)言
SVG視口
viewport
SVG可見(jiàn)區(qū)域的大小,也叫畫(huà)布大小
//一個(gè)栗子
<svg height="800" width="600"></svg>
單位
viewBox
SVG像是像是顯示器的屏幕,xiewBox就像是截圖的那個(gè)框,顯示的效果就是將框中的內(nèi)容全屏的顯示在屏幕上.
//栗子
viewBox="0,0,50,30" //x,y,width,height
在這里,如果有viewBox的時(shí)候,那么里面的內(nèi)容會(huì)相當(dāng)于viewBox的百分比
preserveAspectRatio
使用它來(lái)保持viewBox的寬高比
//語(yǔ)法
preserveAspectRatio=[defer]<align><meetOrSlice>
//demo
<svg width="800" height="400" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style="border:1px solid #ff0000;" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="#abcdef"/>
</svg>
defer作為可選值,在image元素才會(huì)用到,使用在其他元素上會(huì)被忽略
align控制viewBox是否強(qiáng)制進(jìn)行均勻的縮放
meetOrSlice 控制viewBox縮放的方式
meet 保持寬高比,縮放為適合viewport的大小
slice 保持寬高比,將所有不在viewport中的viewBox剪裁掉
none 不保持寬高比,縮放圖像適合整個(gè)viewbox,可能會(huì)發(fā)生圖像變形
坐標(biāo)系統(tǒng)
- 世界坐標(biāo)系統(tǒng)
- 最初坐標(biāo)系統(tǒng)
- 用戶(hù)坐標(biāo)系統(tǒng)
- 嵌套坐標(biāo)系統(tǒng)
- 轉(zhuǎn)換坐標(biāo)系統(tǒng)
世界坐標(biāo)系統(tǒng):
轉(zhuǎn)換坐標(biāo)系統(tǒng):
SVG元素可以通過(guò)縮放,移動(dòng),傾斜和旋轉(zhuǎn)來(lái)變換,類(lèi)似于HTML元素使用transform來(lái)變換
transform屬性
//demo
<rect width="200" height="200" fill="#abcdef" transform="translate(100)"/>
1. CSS transform也可用于SVG元素,但是IE不支持
2. 不能包含單位
3. HTML元素的偏移是相對(duì)自己的中心點(diǎn),而SVG的偏移是相對(duì)SVG的左上角
4. SVG不支持3D的transform
SVG transform translate
//語(yǔ)法
transform="translate(<tx>[<ty>])"
SVG transform scale
//語(yǔ)法
transform="scale(<sx>[<sy>])"
不僅僅是寬高,坐標(biāo)也發(fā)生了縮放
SVG transform skew
//語(yǔ)法
transform="skewX(<skew-angle>)"
transform="skewY(<skew-angle>)"
SVG形狀
- 矩形<rect>
- 圓形<circle>
- 橢圓<ellipse>
- 線(xiàn)<line>
- 折線(xiàn)<polyline>
- 多邊形<polygon>
- path<path>
矩形
<rect x="x" y="y" rx="rx" ry="ry" width="width" height="height"/>
rx,ry 代表圓角半徑
圓形
<circle cx="cx" cy="cy" r="r"/>
cx,cy代表x,y的圓形位置
橢圓
<ellipse cx="cx" cy="cy" rx="rx" ry="ry"/>
rx,ry為橢圓的x,y半徑
cx,cy為橢圓中心的x,y位置
線(xiàn)
<line x1="x1" y1="y1" x2="x2" y2="y2"/>
x1,y1起點(diǎn)
x2,y2終點(diǎn)
折線(xiàn)
<polyline points="x1 y1,x2 y2,x3 y3,...,xn yn"/>
多邊形
polygon和折線(xiàn)很像,不同的是,polygon的路徑在最后一個(gè)點(diǎn)處自動(dòng)回到第一個(gè)點(diǎn)
<polygon points="x1 y1,x2 y2,x3 y3,...,xn yn"/>
路徑
path元素不僅能創(chuàng)建其他基本形狀,還能創(chuàng)建更多其他形狀
定義屬性
path元素的形狀是通過(guò)屬性d定義的,屬性d是一個(gè)點(diǎn)集數(shù)列以及其他關(guān)于如何繪制路徑的信息,值是一個(gè)"命令+參數(shù)"的序列
屬性命令
每個(gè)命令都用一個(gè)關(guān)鍵字母表示,比如字母'M'表示的是'Move to'命令.每個(gè)命令都有兩種表示方式:大寫(xiě)字母,表示絕對(duì)定位;小寫(xiě)字母,表示相對(duì)定位.屬性d采用用戶(hù)坐標(biāo)系統(tǒng),故不需標(biāo)明單位.
直線(xiàn)命令
<path d="M x y L x y H x V y Z"/>
M x y(or m dx dy)
"Move to"命令,M作為路徑的開(kāi)始處,指明路徑的開(kāi)始位置.
M x y表示需要將畫(huà)筆移動(dòng)到(x,y)位置
m dx dy表示需要將畫(huà)筆向右邊移動(dòng)dx像素,向下移動(dòng)dy像素
L x y(or | dx dy)
"Line to"命令,會(huì)在當(dāng)前位置和新位置(L前面畫(huà)筆所在的點(diǎn))之間畫(huà)一條線(xiàn)段.
L x y 表示從L命令之前的點(diǎn)到(x,y)點(diǎn)之間畫(huà)一條線(xiàn)段.
l dx dx表示從l命令之前的點(diǎn)到相對(duì)向右dx像素向下dy像素的點(diǎn)之間畫(huà)一條線(xiàn)段.
H x (or h dx)
繪制水平線(xiàn).H x表示繪制到x軸上的x點(diǎn)位置.h dx表示向右繪制dx像素.
V y (or v dy)
繪制垂直線(xiàn).V x表示繪制到y(tǒng)軸上的y點(diǎn)位置.v dy表示向下繪制dy像素.
Z (or z)
閉合路徑命令.從當(dāng)前點(diǎn)畫(huà)一條直線(xiàn)到路徑的起點(diǎn),不區(qū)分大小寫(xiě).
曲線(xiàn)命令
命令定義
繪制平滑曲線(xiàn)的命令分為貝塞爾曲線(xiàn)和弧形兩種
貝塞爾曲線(xiàn)
貝塞爾曲線(xiàn)由線(xiàn)段和節(jié)點(diǎn)組成,節(jié)點(diǎn)是可拖動(dòng)的指點(diǎn),線(xiàn)段像是可伸縮的皮筋.在path元素里,只存在兩種貝塞爾曲線(xiàn):三次貝塞爾曲線(xiàn)C,兩次貝塞爾曲線(xiàn)Q
三次貝塞爾曲線(xiàn)
C x1 y1,x2 y2,x y (of c dx1 dy1,dx2 dy2,dx dy)
(x,y)表示曲線(xiàn)的終點(diǎn),另外兩個(gè)坐標(biāo)是控制點(diǎn),(x1,y1)是起點(diǎn)的控制點(diǎn),(x2,y2)是終點(diǎn)的控制點(diǎn).
<h2>三次貝塞爾曲線(xiàn)C命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="#C7000B" fill="transparent"/>
<path d="M70 10 C 70 20, 120 20, 120 10" stroke="#C7000B" fill="transparent"/>
<path d="M130 10 C 120 20, 180 20, 170 10" stroke="#C7000B" fill="transparent"/>
<path d="M10 30 C 20 50, 40 50, 50 30" stroke="#C7000B" fill="transparent"/>
<path d="M70 30 C 70 50, 110 50, 110 30" stroke="#C7000B" fill="transparent"/>
<path d="M130 30 C 120 50, 180 50, 170 30" stroke="#C7000B" fill="transparent"/>
<path d="M10 50 C 20 80, 40 80, 50 50" stroke="#C7000B" fill="transparent"/>
<path d="M70 50 C 70 80, 110 80, 110 50" stroke="#C7000B" fill="transparent"/>
<path d="M130 50 C 120 80, 180 80, 170 50" stroke="#C7000B" fill="transparent"/>
</svg>
S x2 y2,x y (or s dx2 dy2,dx dy)
S將若干個(gè)貝塞爾曲線(xiàn)連接起來(lái)`
<h2>S命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
所有控制點(diǎn)和起點(diǎn)都是相切的
二次貝塞爾曲線(xiàn)
Q x1 y1,x y (or q dx1 dy1,dx dy)
(x,y)表示曲線(xiàn)的終點(diǎn),另外一個(gè)坐標(biāo)(x1,y1)是控制點(diǎn).只需要一個(gè)控制點(diǎn),用來(lái)確定起點(diǎn)和終點(diǎn)的曲線(xiàn)斜率
<h2>Q命令</h2>
<svg viewBox="0 0 190 80" xmlns="http://www.w3.org/2000/svg">
<path d="M10 40 Q 95 10 180 40" stroke="#C7000B" fill="transparent"/>
</svg>
T x y(or t dx dy)
T 命令類(lèi)似S命令,若干個(gè)貝塞爾曲線(xiàn)連接起來(lái)
<h2>T命令</h2>
<svg viewBox="0 0 190 160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="#C7000B" fill="transparent"/>
</svg>
弧形
可以視為原型或橢圓的一部分
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
參數(shù)說(shuō)明:
rx,ry分別是橢圓的x,y軸半徑
x-axis-rotation決定橢圓的旋轉(zhuǎn)角度,默認(rèn)角度deg,正方形為順時(shí)針
large-arc-flag決定弧線(xiàn)是大于還是小于180度,0表示小角弧,1表示大角弧
sweep-flag表示弧線(xiàn)方向,0表示從起點(diǎn)到終點(diǎn)沿逆時(shí)針畫(huà)弧,1表示沿順時(shí)針畫(huà)弧
x,y指定弧形的終點(diǎn)
<h1>弧形</h1>
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10"
stroke="#C7000B" fill="green" />
</svg>
