使用方式
- 瀏覽器直接打開
- 在HTML中使用<img>標(biāo)簽引用
- 直接在HTML中使用SVG標(biāo)簽
- 作為CSS背景
基本圖形和屬性
- 基本圖形
<rect>
<circle>
<ellipse>
<line>
<polyline>
<polygon>
- 基本屬性
fill
stroke
stroke-width
transform
基本操作API
- 創(chuàng)建圖形
document.createElementNS(ns, tagName)
- 添加圖形
element.appendChild(childElement)
- 設(shè)置/獲取屬性
element.setAttribute(name, value)
element.getAttribute(name)
SVG的世界限寞、視野铣耘、視窗
- SVG代碼-定義世界[世界是無限大的渣慕，無窮無盡]
- width,height-控制視窗[看世界的一扇窗戶]饵隙，瀏覽器開辟出來用于渲染SVG內(nèi)容的一個區(qū)域
- viewBox,preserveAspectRatio-控制視野[我們能看到世界大小的一種能力]
視野越廣闊冤寿，看到的內(nèi)容越豐富，單個物體的內(nèi)容越小慢逾，跟屏幕分辨率一個道理
理想情況下歧强，視野和視窗有一樣的尺寸
不一樣的情況，就需要填充策略preserveAspectRatio
<svg xmlns="..."
width="800" height="600"
viewBox="0 0 400 300"
preserveAspectRatio="xMidYMid meet">
<!--SVG Content-->
</svg>
SVG中的圖形分組
- <g>標(biāo)簽來創(chuàng)建分組
- 屬性繼承
- transform屬性定義坐標(biāo)變換
- 可以嵌套使用
線性變換
- 線性變換方程
X' = aX + cY + e
Y' = bX + dY + f
- 變換矩陣沙热，記為M
a c e
b d f
0 0 1
旋轉(zhuǎn)
使用極坐標(biāo)變換矩陣
極坐標(biāo)方程：
X = r?cos(α)
Y = r?sin(α)
旋轉(zhuǎn)θ度后
X' = r?cos(α+θ)
Y' = r?sin(α+θ)
矩陣：
cos(θ) -sin(θ) 0
sin(θ) cos(θ) 0
0 0 1
展開后：
X' = r?cos(α)cos(θ)-r?sin(α)sin(θ)=X?cos(θ) - Y?sin(θ) + 0
Y' = r?sin(α)cos(θ)+r?cos(α)sin(θ)=X?sin(θ) + Y?cos(θ) + 0
線性變換列表
- 表示一系列的變換叉钥，結(jié)果為變換的矩陣的乘積
- 后面的變換乘在前面
M=Mn?Mn-1?...?M2?M1?M0
1 0 10 cos(30deg) -sin(30deg) 0
0 1 10 ? sin(30deg) cos(30deg) 0
0 0 1 0 0 1
Mtranslate?Mrotate
transform屬性
- 前驅(qū)坐標(biāo)系：父容器坐標(biāo)系
- transform屬性：定義前驅(qū)坐標(biāo)系到自身坐標(biāo)系的線性變換
- 語法：
rotate(<deg>)
translate(<x>,<y>)
scale(<sx>,<sy>)
matrix(<a>,<b>,<c>,<d>,<e>,<f>)
在SVG中應(yīng)用顏色
<rect fill="rgb(255,0,0)" opacity="0.5" />
<rect stroke="hsla(0,50%,60%,0.5) />"
線性漸變
- <linearGradient>和<stop>
- 定義方向
- 關(guān)鍵點位置及顏色
- gradientUnits
徑向漸變
- <radialGradient>和<stop>
- 定義方向
- 關(guān)鍵點位置及顏色
- gradientUnits
- 焦點位置
坐標(biāo)觀察
getBBox()
獲得當(dāng)前元素所占的矩形區(qū)域getCTM()
獲得視窗坐標(biāo)系到當(dāng)前元素??坐標(biāo)系的變換矩陣getScreenCTM()
獲得瀏覽器坐標(biāo)系到當(dāng)前元素??坐標(biāo)系的變換矩陣getTransformToElement()
獲得從指定元素的??坐標(biāo)系到當(dāng)前元素的??坐標(biāo)系的變換矩陣
HSL
格式：HSL(H,S%,L%)-顏色、飽和度篙贸、亮度
取值范圍：H:[0,359] hue
S,L:[0,100] saturation lightness
優(yōu)勢：符合人類描述顏色的習(xí)慣
筆刷
- 繪制紋理
- <pattern>標(biāo)簽
- patternUnits和patternContentUnits
Path
<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
L10,20 命令 參數(shù)
#參數(shù)之間可以用空格或逗號隔開投队，有一種情況例外，就是下一個數(shù)值是負數(shù)锡宋。
<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
<path d="M 0 0 L 10 20 C 30 -10 40 20 100 100" stroke="red">
<path d="M 0 0, L 10 20, C 30 -10 40 20 100 100" stroke="red">
#以上三種表示方式效果是一致的
Path命令匯總
M = moveto(M X,Y) ：將畫筆移動到指定的坐標(biāo)位置
L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
A = (rx, ry, xr, laf, sf, x, y) - 繪制弧線
Z = closepath()：關(guān)閉路徑
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)：映射
備注：
坐標(biāo)軸為以(0,0)為中心曹抬，X軸水平向右东亦，Y軸水平向下。
所有指令大小寫均可扒披。大寫絕對定位，參照全局坐標(biāo)系圃泡；小寫相對定位碟案，參照父容器坐標(biāo)系
M 起點X，起點Y L（直線）終點X颇蜡，終點Y H（水平線）終點X V（垂直線）終點Y
A指令
允許不閉合价说。可以想像成是橢圓的某一段风秤，共七個參數(shù)：
A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
RX,RY指所在橢圓的半軸大小
XROTATION指橢圓的X軸與水平方向順時針方向夾角鳖目，可以想像成一個水平的橢圓繞中心點順時針旋轉(zhuǎn)XROTATION的角度。
FLAG1只有兩個值缤弦，1表示大角度弧線疑苔，0為小角度弧線。
FLAG2只有兩個值，確定從起點至終點的方向惦费，1為順時針兵迅，0為逆時針
X,Y為終點坐標(biāo)
弧線命令
- A (rx, ry, xr, laf, sf, x, y) - 繪制弧線
- 最復(fù)雜的命令
- rx -(radius-x)弧線所在橢圓的 x 半軸長
- ry -(radius-y)弧線所在橢圓的 y 半軸長
- xr -(xAxis-rotation)弧線所在橢圓的長軸角度
- laf -(large-arc-flag)是否選擇弧長較長的那一段弧[1表示大角度弧線，0為小角度弧線薪贫。]
- sf -(sweep-flag)是否選擇逆時針方向的那一段弧[1為順時針恍箭，0為逆時針]
- x, y - 弧的終點位置
SVG文本
- <text>和<tspan>創(chuàng)建文本
- 垂直居中問題
- <textPath>讓文本在指定路徑上排列
- <a>插入超鏈接
<text>和<tspan>標(biāo)簽
- x和y屬性 - 定位標(biāo)準
- dx和dy屬性 - 字形偏移
- style屬性 - 設(shè)置樣式
SVG計時器
·requestAnimationFrame(frame) //類似于setTimeout
function frame(){
t += 0.01;
update(t);
requestAnimationFrame(frame);
}
frame();
