使用方式

• 瀏覽器直接打開
• 在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代碼-定義世界[世界是無(wú)限大的，無(wú)窮無(wú)盡]
• width,height-控制視窗[看世界的一扇窗戶]，瀏覽器開辟出來(lái)用于渲染SVG內(nèi)容的一個(gè)區(qū)域
• viewBox,preserveAspectRatio-控制視野[我們能看到世界大小的一種能力]
  視野越廣闊，看到的內(nèi)容越豐富，單個(gè)物體的內(nèi)容越小，跟屏幕分辨率一個(gè)道理
  理想情況下，視野和視窗有一樣的尺寸
  不一樣的情況，就需要填充策略preserveAspectRatio

<svg xmlns="..."
width="800" height="600"
viewBox="0 0 400 300"
preserveAspectRatio="xMidYMid meet">
<!--SVG Content-->
</svg>

SVG中的圖形分組

• <g>標(biāo)簽來(lái)創(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)系的線性變換
• 語(yǔ)法：

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)鍵點(diǎn)位置及顏色
• gradientUnits

徑向漸變

• <radialGradient>和<stop>
• 定義方向
• 關(guān)鍵點(diǎn)位置及顏色
• gradientUnits
• 焦點(diǎn)位置

坐標(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)勢(shì)：符合人類描述顏色的習(xí)慣

筆刷

• 繪制紋理
• <pattern>標(biāo)簽
• patternUnits和patternContentUnits

Path

<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
L10,20      命令 參數(shù)
#參數(shù)之間可以用空格或逗號(hào)隔開，有一種情況例外，就是下一個(gè)數(shù)值是負(fù)數(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) ：將畫筆移動(dòng)到指定的坐標(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軸水平向下。
所有指令大小寫均可。大寫絕對(duì)定位，參照全局坐標(biāo)系；小寫相對(duì)定位，參照父容器坐標(biāo)系
M　起點(diǎn)X，起點(diǎn)Y　L（直線）終點(diǎn)X，終點(diǎn)Y　H（水平線）終點(diǎn)X　V（垂直線）終點(diǎn)Y
A指令
允許不閉合?？梢韵胂癯墒菣E圓的某一段，共七個(gè)參數(shù)：
A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
RX,RY指所在橢圓的半軸大小
XROTATION指橢圓的X軸與水平方向順時(shí)針?lè)较驃A角，可以想像成一個(gè)水平的橢圓繞中心點(diǎn)順時(shí)針旋轉(zhuǎn)XROTATION的角度。
FLAG1只有兩個(gè)值，1表示大角度弧線，0為小角度弧線。
FLAG2只有兩個(gè)值，確定從起點(diǎn)至終點(diǎn)的方向，1為順時(shí)針，0為逆時(shí)針
X,Y為終點(diǎn)坐標(biāo)

弧線命令

• A (rx, ry, xr, laf, sf, x, y) - 繪制弧線
• 最復(fù)雜的命令
• rx -(radius-x)弧線所在橢圓的 x 半軸長(zhǎng)
• ry -(radius-y)弧線所在橢圓的 y 半軸長(zhǎng)
• xr -(xAxis-rotation)弧線所在橢圓的長(zhǎng)軸角度
• laf -(large-arc-flag)是否選擇弧長(zhǎng)較長(zhǎng)的那一段弧[1表示大角度弧線，0為小角度弧線。]
• sf -(sweep-flag)是否選擇逆時(shí)針?lè)较虻哪且欢位1為順時(shí)針，0為逆時(shí)針]
• x, y - 弧的終點(diǎn)位置

SVG文本

• <text>和<tspan>創(chuàng)建文本
• 垂直居中問(wèn)題
• <textPath>讓文本在指定路徑上排列
• <a>插入超鏈接

<text>和<tspan>標(biāo)簽

• x和y屬性 - 定位標(biāo)準(zhǔn)
• dx和dy屬性 - 字形偏移
• style屬性 - 設(shè)置樣式

SVG計(jì)時(shí)器

·requestAnimationFrame(frame)   //類似于setTimeout
function frame(){
    t += 0.01;
    update(t);
    requestAnimationFrame(frame);
}
frame();