@(HTML5)[canvas與SVG]

[TOC]

十一 、SVG

HTML體系中，最常用的繪制矢量圖的技術(shù)是SVG和HTML5新增加的canvas元素。這兩種技術(shù)都支持繪制矢量圖和光柵圖。不過canvas更偏重于動畫的制作。所以，繪制矢量圖的大任落到了SVG身上。

SVG簡介

可縮放矢量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴(yán)格遵從XML語法)。 SVG允許三種類型的圖形對象：矢量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文本。 可以將圖形對象（包括文本）分組、樣式化、轉(zhuǎn)換和組合到以前呈現(xiàn)的對象中。 SVG 功能集包括嵌套轉(zhuǎn)換、剪切路徑、alpha 蒙板和模板對象。

SVG既可以說是一種協(xié)議，也可以說是一門語言；既是HTML的一個標(biāo)準(zhǔn)元素，也是一種圖片格式。

SVG與其他的圖片格式對比

SVG與其它的圖片格式相比，有很多優(yōu)點(很多優(yōu)點來源于矢量圖的優(yōu)點)：

• SVG文件是純粹的XML， 可被非常多的工具讀取和修改(比如記事本)。
• SVG的元素和屬性必須按標(biāo)準(zhǔn)格式書寫，因為XML是區(qū)分大小寫的（這一點和html不同）
• SVG里的屬性值必須用引號引起來，就算是數(shù)值也必須這樣做。
• SVG 與JPEG 和GIF圖像比起來，尺寸更小，且可壓縮性更強(qiáng)。
• SVG 是可伸縮的，可在圖像質(zhì)量不下降的情況下被放大，可在任何的分辨率下被高質(zhì)量地打印。
• SVG 圖像中的文本是可選的，同時也是可搜索的(很適合制作地圖)。
• SVG 可以與 Java 技術(shù)一起運(yùn)行。
• SVG 是開放的標(biāo)準(zhǔn)。

注意事項： SVG的元素和屬性必須按標(biāo)準(zhǔn)格式書寫，因為XML是區(qū)分大小寫的（這一點和html不同） SVG里的屬性值必須用引號引起來，就算是數(shù)值也必須這樣做。

SVG使用

1. 可以直接使用svg
2. 可以使用img標(biāo)簽引用svg
3. 可以在HTML中使用svg
4. 可以作為背景圖片

使用SVG畫圖

矩形 - rect元素

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

這個元素有6個控制位置和形狀的屬性，分別是：

x：矩形左上角的坐標(biāo)(用戶坐標(biāo)系)的x值。

y：矩形左上角的坐標(biāo)(用戶坐標(biāo)系)的y值。

width：矩形寬度。

height：矩形高度。

rx：實現(xiàn)圓角效果時，圓角沿x軸的半徑。

ry：實現(xiàn)圓角效果時，圓角沿y軸的半徑。

注意：rx與ry只設(shè)置了一個，另一個值等于設(shè)置了的這個值

圓 - circle元素

<circle cx="25" cy="75" r="20"/>

這個元素的屬性很簡單，主要是定義圓心和半徑：

r：圓的半徑。

cx：圓心坐標(biāo)x值。

cy：圓心坐標(biāo)y值。

橢圓 - ellipse元素

<ellipse cx="75" cy="75" rx="20" ry="5"/>

這個是更加通用的圓形元素，你可以分別控制半長軸和半短軸的長度，來實現(xiàn)不同的橢圓，很容易想到，當(dāng)兩個半軸相等時，就是正圓形了。

rx：半長軸(x半徑)。

ry：半短軸(y半徑)。

cx：圓心坐標(biāo)x值。

cy：圓心坐標(biāo)y值。

直線 - line元素

<line x1="10" x2="50" y1="110" y2="150"/>

直線需要定義起點與終點即可：

x1：起點x坐標(biāo)。

y1：起點y坐標(biāo)。

x2：終點x坐標(biāo)。

y2：終點y坐標(biāo)。

折線 - polyline元素

<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

折線主要是要定義每條線段的端點即可，所以只需要一個點的集合作為參數(shù)：

points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數(shù)字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。

多邊形- polygon元素

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

這個元素就是比polyline元素多做一步，把最后一個點和第一個點連起來，形成閉合圖形。參數(shù)是一樣的。

points：一系列的用空格，逗號，換行符等分隔開的點。每個點必須有2個數(shù)字：x值和y值。所以下面3個點 (0,0), (1,1)和(2,2)可以寫成："0 0, 1 1, 2 2"。路徑繪制完后閉合圖形，所以最終的直線將從位置(2,2)連接到位置(0,0)。

路徑 - path元素

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

這個是最通用，最強(qiáng)力的元素了；使用這個元素你可以實現(xiàn)任何其他的圖形，不僅包括上面這些基本形狀，也可以實現(xiàn)像貝塞爾曲線那樣的復(fù)雜形狀；此外，使用path可以實現(xiàn)平滑的過渡線段，雖然也可以使用polyline來實現(xiàn)這種效果，但是需要提供的點很多，而且放大了效果也不好。這個元素控制位置和形狀的只有一個參數(shù)：

d：一系列繪制指令和繪制參數(shù)(點)組合成。

中間的字母的意思：

• M：moveTo M10 10
• L：lineTo L10 10
• H：H draws a horizontal line H 90
• V：V draws a vertical line V 90
• Z：ClosePath Z
• C：三次貝賽爾曲線 C x1 y1, x2 y2, x y
• S：三次貝賽爾曲線補(bǔ)充命令。S命令可以用來創(chuàng)建與之前那些曲線一樣的貝塞爾曲線但是，如果S命令跟在一個C命令或者另一個S命令的后面，它的第一個控制點，就會被假設(shè)成前一個控制點的對稱點。如果S命令單獨(dú)使用，前面沒有C命令或者另一個S命令，那么它的兩個控制點就會被假設(shè)為同一個點。S x2 y2, x y
• Q：二次貝塞爾曲線 Q x1 y1, x y
• T：三次貝賽爾曲線補(bǔ)充命令。與S有異曲同工之妙。T命令前面必須是一個Q命令，或者是另一個T命令，才能達(dá)到這種效果。需要注意的是，如果T單獨(dú)使用，那么控制點就會被認(rèn)為和終點是同一個點，所以畫出來的將是一條直線。 T x y
• A：弧形命令 A rx ry x-axis-rotation large-arc-flag sweep-flag x y 前兩個參數(shù)分別是x軸半徑和y軸半徑，第三個參數(shù)表示弧形的旋轉(zhuǎn)情況。large-arc-flag（角度大?。?和sweep-flag（弧線方向），large-arc-flag決定弧線是大于還是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧線的方向，0表示從起點到終點沿逆時針畫弧，1表示從起點到終點沿順時針畫弧。最后兩個參數(shù)是指定弧形的終點

L,H,V為小寫的時候便表示的是長度，為大寫的表示的是坐標(biāo)

繪制指令分為絕對坐標(biāo)指令和相對坐標(biāo)指令兩種，這兩種指令使用的字母是一樣的，就是大小寫不一樣，絕對指令使用大寫字母，坐標(biāo)也是絕對坐標(biāo)；相對指令使用對應(yīng)的小寫字母，點的坐標(biāo)表示的都是偏移量。

絕對坐標(biāo)繪制指令

這組指令的參數(shù)代表的是絕對坐標(biāo)。假設(shè)當(dāng)前畫筆所在的位置為(x0,y0)，則下面的絕對坐標(biāo)指令代表的含義如下所示：

image

SVG畫筆與填充

邊框色 - stroke屬性

這個屬性使用設(shè)置的值畫圖形的邊框，使用起來也很直接，把顏色值賦給它就可以了。注意：

1. 如果不提供stroke屬性，則默認(rèn)不繪制圖形邊框。
2. 可以設(shè)置邊的透明度，就是stroke-opacity，值的范圍是0到1。
3. 使用stroke-width定義描邊的寬度

實際上，邊的情況比圖形內(nèi)部稍微復(fù)雜一點，因為邊除了顏色，還有"形狀"需要定義。

線的端點 - stroke-linecap屬性
這個屬性定義了線段端點的風(fēng)格，這個屬性可以使用butt,square,round三個值。

enter image description here

線的連接 - stroke-linejoin屬性
這個屬性定義了線段連接處的風(fēng)格，這個屬性可以使用miter,round,bevel三個值。

線的虛實 - stroke-dasharray屬性
這個屬性可以設(shè)置線段采用何種虛實線。這個屬性是設(shè)置一些列數(shù)字，不過這些數(shù)字必須是逗號隔開的。屬性中當(dāng)然可以包含空格，但是空格不作為分隔符。每個數(shù)字定義了實線段的長度，分別是按照繪制、不繪制這個順序循環(huán)下去。需要注意兩個只與三個值的情況

stroke-miterlimit
這個和canvas中的一樣，它處理什么時候畫和不畫線連接處的miter效果。

stroke-dashoffset
這個屬性設(shè)置開始畫虛線的位置

填充色 - fill屬性

這個屬性使用設(shè)置的顏色填充圖形內(nèi)部，使用很簡單，直接把顏色值賦給這個屬性就可以了。
注意事項：

1. 如果不提供fill屬性，則默認(rèn)會使用黑色填充,如果要取消填充，需要設(shè)置成none。
2. 可以設(shè)置填充的透明度，就是fill-opacity，值的范圍是0到1。
3. 稍微復(fù)雜一點的是fill-rule屬性。這個屬性定義了判斷點是不是屬于填充范圍的算法；除了inherit這個值外，還有兩個取值：
   • nonzero：這個值采用的算法是：從需要判定的點向任意方向發(fā)射線，然后計算圖形與線段交點的處的走向；計算結(jié)果從0開始，每有一個交點處的線段是從左到右的，就加1；每有一個交點處的線段是從右到左的，就減1；這樣計算完所有交點后，如果這個計算的結(jié)果不等于0，則該點在圖形內(nèi)，需要填充；如果該值等于0，則在圖形外，不需要填充。
   • evenodd：這個值采用的算法是：從需要判定的點向任意方向發(fā)射線，然后計算圖形與線段交點的個數(shù)，個數(shù)為奇數(shù)則改點在圖形內(nèi)，需要填充；個數(shù)為偶數(shù)則點在圖形外，不需要填充。

使用CSS展示數(shù)據(jù)

當(dāng)然，你也可以直接使用css來修改這些樣式

SVG顏色的表示

SVG和canvas中是一樣的，都是使用標(biāo)準(zhǔn)的HTML/CSS中的顏色表示方法，這些顏色都可以用于fill和stroke屬性。

基本有下面這些定義顏色的方式：

1. 顏色名字： 直接使用顏色名字red, blue, black...
2. rgba/rgb值： 這個也很好理解，例如#ff0000,rgba(255,100,100,0.5)。
3. 十六進(jìn)制值： 用十六進(jìn)制定義的顏色，例如#ffffff。
4. 漸變值：這個也與canvas中一樣，支持兩種漸變色：線性漸變，環(huán)形漸變。
5. 圖案填充：使用自定義的圖案作為填充色。

漸變

使用linearGradient元素即可定義線性漸變，每一個漸變色成分使用stop元素定義。

image

• 使用stop定義
• 漸變代碼需要放在<defs>標(biāo)簽中
• 必須使用id命名
• 使用url(#id)賦值

線性：linearGradient

offset屬性：這個和線性漸變的值是一樣，但是含義不一樣。在環(huán)形漸變中，0%代表圓心處，這個很好理解。

x1="0" x2="0" y1="0" y2="1"：四個屬性決定漸變的方向

徑向：radialGradient

cx,cy,r屬性：其實也很好理解，環(huán)形漸變，當(dāng)然要定義環(huán)的圓心和半徑了，體會一下上面例子中圓的大小和位置就能理解了。

fx,fy屬性：定義顏色中心(焦點)處的位置，也就是漸變色最濃處的坐標(biāo)

不過這里需要注意一下上面cx,cy,r,fx,fy的值，你會發(fā)現(xiàn)它們都是小數(shù)，那么單位是什么呢？

這個需要先了解另外一個相關(guān)的屬性：gradientUnits，它定義了定義漸變色使用的坐標(biāo)單位。這個屬性有2個可用值：userSpaceOnUse和objectBoundingBox。

objectBoundingBox是默認(rèn)值，它使用的坐標(biāo)都是相對于對象包圍盒的(方形包圍盒，不是方形包圍盒的情況比較復(fù)雜，略過)，取值范圍是0到1。例如上例中的cx,cy的坐標(biāo)值(0.25,0.25)。意味著這個圓心是在包圍盒的左上角1/4處，半徑0.25意味著半徑長是對象方形包圍盒長的1/4，就像你們圖中看到的那樣。

userSpaceOnUse表示使用的是絕對坐標(biāo)，使用這個設(shè)置的時候，你必須要保證漸變色和填充的對象要保持在一個位置。

spreadMethod屬性：這個屬性定義了漸變色到達(dá)它的終點時應(yīng)該采取的行為。該屬性有3個可選值：pad(默認(rèn)值),reflect,repeat。pad不用說了，屬于自然過渡，漸變色結(jié)束以后，使用最后一個成員色直接渲染對象剩下的部分。refect會讓漸變色繼續(xù)，只不過漸變色會反向繼續(xù)渲染，從最后一個顏色開始到第一個顏色這個順序渲染；等到再次到達(dá)漸變色終點時，再反序，如此這般指導(dǎo)對象填充完畢。repeat也會讓漸變色繼續(xù)渲染，但是不會反序，還是一遍一遍從第一種顏色到最后一種顏色渲染

紋理填充

例子看起來很簡單，由漸變色創(chuàng)建pattern，然后使用pattern
填充矩形。這里需要注意：

1. 不同的瀏覽器填充這個pattern的時候效果不一樣。
2. pattern也需要定義id。
3. pattern也必須要定義在defs中。
4. pattern的使用也是把url(#id)直接賦值給fill或stroke。

SVG文本與圖像

SVG中渲染文本

直接顯示在圖片中文本 -text元素
直接顯示文本可以使用text元素

<svg>
    <rect width="300" height="200" fill="red" />
    <circle r="80" cx="150" cy="100" fill="green" />
    <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

如上面的例子中所示，text元素可以設(shè)置下列的屬性：

• x,y是文本位置坐標(biāo)。
• text-anchor是文本顯示的方向，其實也就是位置(x,y)處于文本的位置。這個屬性有start,middle,end和inherit三種值。
• start表示文本位置坐標(biāo)(x,y)位于文本的開始處，文本從這點開始向右挨個顯示。
• middle表示(x,y)位于文本中間處，文本向左右兩個方向顯示，其實就是居中顯示。
• end表示(x,y)點位于文本結(jié)尾，文本向左挨個顯示。

除了這些屬性，下面的這些屬性都既可以在CSS中指定，也可以直接在屬性中指定:

• fill,stroke：填充和描邊顏色，具體使用在后面總結(jié)。
• font的相關(guān)屬性：font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing 和 text-decoration。

**文本區(qū)間 - tspan元素 **
這個元素是text元素的強(qiáng)力補(bǔ)充；它用于渲染一個區(qū)間內(nèi)的文本；它只能出現(xiàn)在text元素或者tspan元素的子元素中。典型的用法就是強(qiáng)調(diào)顯示部分文本。例如：

<text>
    <tspan font-weight="bold" fill="red">文字</tspan>
</text>

tspan元素可以設(shè)置一下的屬性：

• x,y：設(shè)置包含的文本的絕對坐標(biāo)值，這個值會覆蓋默認(rèn)的文本位置
• dx,dy：設(shè)置包含的文本相對于默認(rèn)的文本位置的偏移量
• rotate：設(shè)置字體的旋轉(zhuǎn)角度
• textLength：給出字符串的計算長度

文本引用 - tref元素
這個元素允許引用定義過的文本，并高效的拷貝到當(dāng)前位置，通常配合xlink:href指定目的元素。因為是拷貝過來的，所以使用css修改當(dāng)前文本的時候，不會修改原來的文本。

文本路徑 - textPatch元素
這個比較有意思，效果也很酷，能做出很多的藝術(shù)效果；這個元素從它的xlink:href屬性獲取指定的路徑并把文本對齊到這個路徑上

SVG坐標(biāo)與變換

坐標(biāo)系統(tǒng)

SVG存在兩套坐標(biāo)系統(tǒng)：視窗坐標(biāo)系與用戶坐標(biāo)系。默認(rèn)情況下，用戶坐標(biāo)系與視窗坐標(biāo)系的點是一一對應(yīng)的，都為原點在視窗的左上角，x軸水平向右，y軸豎直向下；
SVG的視窗位置一般是由CSS指定，尺寸由SVG元素的屬性width和height設(shè)置

視窗：指的是網(wǎng)頁上面可視的矩形局域，長度和寬度都是有限的，這個區(qū)域一般與外圍對象的尺寸有關(guān)。

視窗坐標(biāo)系：本質(zhì)是一個坐標(biāo)系，有原點，x軸與y軸；而且在兩個方向上是無限延伸的。默認(rèn)情況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下。可以對這個坐標(biāo)系的點進(jìn)行變換。

用戶坐標(biāo)系：本質(zhì)是一個坐標(biāo)系，有原點，x軸與y軸；而且在兩個方向上是無限延伸的。默認(rèn)情況下，原點在視窗的左上角，x軸水平向右，y軸豎直向下。可以對這個坐標(biāo)系的點進(jìn)行變換。

坐標(biāo)空間變換

視窗空間變換由相關(guān)元素(這些元素創(chuàng)建了新的視窗)的屬性viewBox控制；用戶空間變換由圖形元素的transform屬性控制。視窗空間變換應(yīng)用于對應(yīng)的整個視窗，用戶空間變換應(yīng)用于當(dāng)前元素及其子元素。

視窗變換 - viewBox屬性

viewBox屬性值的格式為(x0,y0,u_width,u_height)，每個值之間用逗號或者空格隔開，它們共同確定了視窗顯示的區(qū)域：視窗左上角坐標(biāo)設(shè)為(x0,y0)、視窗的寬設(shè)為u_width，高為u_height；這個變換對整個視窗都起作用。

用戶坐標(biāo)系的變換 - transform屬性

這個與css中的translate，rotate，skew，scale一樣。同樣可以一起使用

SVG的重用與引用

組合- g元素

g元素是一種容器，它組合一組相關(guān)的圖形元素成為一個整體；這樣，我們就可以對這個整體進(jìn)行操作。這個元素通?？梢院蚫esc和title元素配合使用，提供文檔的結(jié)構(gòu)信息。結(jié)構(gòu)良好的文檔通常可讀性和渲染效率都不錯。

注意幾點：

1. xmlns="http://www.w3.org/2000/svg"表明了整個svg元素默認(rèn)的命名空間是svg。這個在無歧義的時候可以省略。這里由于svg文檔是一個XML文檔，XML命名空間的相關(guān)規(guī)則這里都是適用的。例如可以給svg顯示的指定命名空間，給命名空間提供別名等。

2. g元素是可以嵌套的。

3. 組合起來的圖形元素就和單個的元素一樣，可以給id值，這樣，需要的時候(例如動畫和重用一組元素)只用引用這個id值就可以了。

4. 組合一組圖形元素可以統(tǒng)一設(shè)置這組元素的相關(guān)屬性(fill,stroke,transform等)，這也是使用組合的一種場景。

基礎(chǔ)變形

平移：translate(x,y)

兩個參數(shù)，如果沒有第二個參數(shù)，則默認(rèn)賦值為0。

旋轉(zhuǎn)：rotate(angle)

一個參數(shù)，參數(shù)指旋轉(zhuǎn)的度數(shù)

斜切：skewX()與skewY()

每個需要一角度以確定元素斜切到多遠(yuǎn)。

scale()

它需要兩個數(shù)字，作為比率計算如何縮放。0.5表示收縮到50%。如果第二個數(shù)字被忽略了，它默認(rèn)等于第一個值。

利用剛剛介紹的<g>元素，把這些東西變成一個整體。可以對整體進(jìn)行操作

如果使用了變形，你會在元素內(nèi)部建立了一個新的坐標(biāo)系統(tǒng)，應(yīng)用了這些變形，你為該元素和它的子元素指定的單位可能不是1:1像素映射。但是依然會根據(jù)這個變形進(jìn)行歪曲、斜切、轉(zhuǎn)換、縮放操作。

SVG可以嵌套SVG

剪切與遮罩

clipPath：剪切。clipPath的這一部分區(qū)域才會被顯示
mask：遮罩

用opacity定義透明度

opacity：
fill-opacity：
stroke-opacity：
當(dāng)然，你可以使用CSS樣式來修飾

SVG中渲染圖片 - image元素

使用xlink:href插入圖片路徑
注意：
如果你沒有設(shè)置x屬性或y屬性，它們自動被設(shè)置為0。

如果你沒有設(shè)置height屬性或width屬性，它們自動被設(shè)置為0。

如果width屬性或height等于0，將不會呈現(xiàn)這個圖像。

模板 - symbol元素

symbol元素用于定義圖形模板(模板可以包含很多圖形)，這個模板可以被use元素實例化。模板的功能與g元素很相似，都是提供一組圖形對象，但是也有一些區(qū)別。與g元素不同的地方是：

1.symbol元素本身是不會被渲染的，只有symbol模板的實例會被渲染。

2.symbol元素可以擁有屬性viewBox和preserveAspectRatio，這些允許symbol縮放圖形元素。

從渲染角度來說，與symbol元素相似的元素是marker(定義箭頭和標(biāo)號)和pattern(定義顏色)元素；這些元素不會直接被渲染；他們的使用方式基本都是由use元素去實例化。正是這個原因，對于symbol來說，'display'屬性是沒有意義的。

定義 - defs元素

SVG允許定義一組對象，然后重用這組對象(注意，不僅僅是圖形對象)。最常見的例子如定義漸變色，然后再其他的圖形對象中賦給fill屬性。漸變色定義的時候是不會渲染的，所以這類型的對象可以放到任何地方。重用對于圖形對象中也是經(jīng)常存在的，而且我們也不希望定義的時候直接渲染，而是想在引用的地方渲染，這個可以用defs元素實現(xiàn)。

兩種使用：一種是使用fill填充。另一個是使用use元素連接

引用 - use元素

任何svg, symbol, g, 單個的圖形元素和use元素本質(zhì)上都可以作為模板對象被use元素引用(例如初始化)。use引用的圖形內(nèi)容會在指定的位置渲染。與image元素不同，use元素不能引用整個文檔。
use元素也有x, y, width和height屬性，這些屬性可以省略，如果不省略的話，會將被引用的圖形內(nèi)容坐標(biāo)或長度映射到當(dāng)前的用戶坐標(biāo)空間來。

基本操作API

• 創(chuàng)建圖形：
  • document.createElementNS(ns,tagName) ns是什么呢？就是 這個 "http://www.w3.org/2000/svg" tagName值 svg rect，circle等
• 添加圖形：
  • appendChild
• 設(shè)置/獲取屬性：
  • setAttribute
  • getAttribute

SVG SMIL animation

SMIL是Synchronized Multimedia Integration Language（同步多媒體集成語言）的首字母縮寫簡稱

SMIL允許你做下面這些事情：

• 動畫元素的數(shù)值屬性（X, Y, …）
• 動畫屬性變換（平移或旋轉(zhuǎn)）
• 動畫顏色屬性
• 沿著運(yùn)動路徑運(yùn)動

五大元素

1. set
2. animate
3. animateColor ：以廢棄，使用animate實現(xiàn)
4. animateTransform
5. animateMotion

set

set意思設(shè)置，此元素沒有動畫效果。你可能會疑問了，既然這個元素沒有動畫效果，怎么會是animation五大成員之一呢？

OK, 這樣的，雖然set雖然不能觸發(fā)連續(xù)的動畫，但是，其還是可以實現(xiàn)基本的延遲功能。就是指：可以在特定時間之后修改某個屬性值（也可以是CSS屬性值）。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      馬
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

animate

基礎(chǔ)動畫元素。實現(xiàn)單屬性的動畫過渡效果。

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    馬
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>

animateTransform

一看就知道實現(xiàn)transform變換動畫效果的。知識是一脈相承的，這里的transform變換與CSS3的transform變換

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">馬</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>

animateMotion

animateMotion元素可以讓SVG各種圖形沿著特定的path路徑運(yùn)動

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">馬
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

自由組合

SVG animation 參數(shù)

1. attributeName = "attributeName"
   要變化的元素屬性名稱，① 可以是元素直接暴露的屬性，例如，對于本文反復(fù)出現(xiàn)的「馬」對應(yīng)的text元素上的x, y或者font-size; ② 可以是CSS屬性。例如，透明度opacity
2. attributeType = “CSS | XML | auto”
   attributeType支持三個固定參數(shù)，CSS/XML/auto. 用來表明attributeName屬性值的列表。x, y以及transform就屬于XML, opacity就屬于CSS. auto為默認(rèn)值，自動判別的意思（實際上是先當(dāng)成CSS處理，如果發(fā)現(xiàn)不認(rèn)識，直接XML類別處理）。因此，如果你不確信某屬性是XML類別還是CSS類別的時候，我的建議是不設(shè)置attributeType值，直接讓瀏覽器自己去判斷，幾乎無差錯。那么疑問來了：“既然瀏覽器醬可以自己判斷屬性類別，那這個屬性還有什么意義嗎？”我琢磨著，可能某些屬性，XML能其作用，CSS也能其作用，例如font-size, 此時就需要明確下歸屬。
3. from, to, by, values
   上面4個屬性是一個家族的，是最具哲理的一個家族。他們解決的是非常有哲理的問題：你從哪里來？要到哪里去？

• from = “value“：動畫的起始值。
• to = “value“：指定動畫的結(jié)束值。
• by = “value“：動畫的相對變化值。
• values = “l(fā)ist"：用分號分隔的一個或多個值，可以看出是動畫的多個關(guān)鍵值點。

四個之間的約束：
a. 如果動畫的起始值與元素的默認(rèn)值是一樣的，from參數(shù)可以省略。
b. （不考慮values）to,by兩個參數(shù)至少需要有一個出現(xiàn)。否則動畫效果沒有。to表示絕對值，by表示相對值。拿位移距離，如果from是100, to值為160則表示移動到160這個位置，但是，如果by值是160，則表示移動到100+160=260這個位置。
c. 如果to,by同時出現(xiàn)，則by打醬油，只識別to.
d. 如果to,by,values都沒設(shè)置，自然沒動畫效果。如果任意（包括from）一個屬性的值不合法，規(guī)范上說是沒有動畫效果。但是，經(jīng)測試，F(xiàn)ireFox瀏覽器確實如此，但是Chrome特意做了寫容錯處理。例如，本來是數(shù)值的屬性，寫了個諸如a這個不合法的值，其會當(dāng)作0來處理，動畫效果依然存在。
e. values可以是一個值或多值。根據(jù)在Chrome瀏覽器下的測試，是一個值的時候是沒有動畫效果。多值時候有動畫效果。當(dāng)values值設(shè)置并能識別時候，from, to, by的值都會被忽略。那values屬性是干什么的呢？別看名字挺大眾的，其還是有些功力的。我們實現(xiàn)動畫，不可能就是單純的從a位置到b位置，有時候，需要去c位置過渡下。此時，實際上有3個動畫關(guān)鍵點。而from, to/by只能駕馭兩個，此時就是values大顯身手的時候了！
總結(jié)下，也就是from-to動畫、from-by動畫、to動畫、by動畫以及values動畫。

4. begin, end
   begin的定義是分號分隔的一組值。看到?jīng)]？是一組值，單值只是其中的情況之一。例如，beigin="3s;5s"表示的是3s之后動畫走一下，6s時候動畫再走一下（如果之前動畫沒走完，會立即停止從頭開始）
5. dur
   dur屬性值比begin簡單了好幾層樓，就后面兩種：常規(guī)時間值 | "indefinite".

“常規(guī)時間值”就是3s之類的正常值；"indefinite"指事件無限。試想下，動畫時間無限，實際上就是動畫壓根不執(zhí)行的意思。因此，設(shè)置為"indefinite"跟沒有dur是一個意思，與dur解析異常一個意思。

6. calcMode, keyTimes, keySplines
   這幾個參數(shù)是控制動畫先快還是先慢類似這樣作用的。

calcMode屬性支持4個值：discrete | linear | paced | spline. 中文意思分別是：“離散”|“線性”|“踏步”|“樣條”。

discrete
from值直接跳到to值。

linear
animateMotion元素以外元素的calcMode默認(rèn)值。動畫從頭到尾的速率都是一致的。

paced
通過插值讓動畫的變化步調(diào)平穩(wěn)均勻。僅支持線性數(shù)值區(qū)域內(nèi)的值，這樣點之間“距離”的概念才能被計算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都會打醬油。

spline 谷歌不兼容
插值定義貝塞爾曲線。spline點的定義在keyTimes屬性中，每個時間間隔控制點由keySplines定義。

keyTimes = “l(fā)ist”
跟上面提到的list類似，都是分號分隔一組值。keyTimes總名字上看是關(guān)鍵時間點的意思，大致就是這個意思。前面提到過values也是多值，這里有一些約定的規(guī)則：首先，keyTimes值的數(shù)目要和values一致，如果是from/to/by動畫，keyTimes就必須有兩個值。然后對于linear和spline動畫，第一個數(shù)字要是0, 最后一個是1。 最后，每個連續(xù)的時間值必須比它前面的值大或者相等。

paced模式下，keyTimes會被忽略；keyTimes定義錯誤，也會被忽略；dur為indefinite也會被忽略。

keySplines = “l(fā)ist”
keySplines表示的是與keyTimes相關(guān)聯(lián)的一組貝塞爾控制點（默認(rèn)0 0 1 1）。每個控制點使用4個浮點值表示：x1 y1 x2 y2. 只有模式是spline時候這個參數(shù)才有用，也是分號分隔，值范圍0~1，總是比keyTimes少一個值。

如果keySplines值不合法或個數(shù)不對，是沒有動畫效果的。

7. repeatCount, repeatDur
   repeatCount表示動畫執(zhí)行次數(shù)，可以是合法數(shù)值或者”indefinite“（動畫循環(huán)到電腦死機(jī)）。

repeatDur定義重復(fù)動畫的總時間?？梢允瞧胀〞r間值或者”indefinite（”動畫循環(huán)到電腦死機(jī)）。

8. fill
   fill表示動畫間隙的填充方式。支持參數(shù)有：freeze | remove. 其中remove是默認(rèn)值，表示動畫結(jié)束直接回到開始的地方。freeze“凍結(jié)”表示動畫結(jié)束后像是被凍住了，元素保持了動畫結(jié)束之后的狀態(tài)。

9. accumulate, additive
   accumulate是累積的意思。支持參數(shù)有：none | sum. 默認(rèn)值是none. 如果值是sum表示動畫結(jié)束時候的位置作為下次動畫的起始位置。

additive控制動畫是否附加。支持參數(shù)有：replace | sum. 默認(rèn)值是replace. 如果值是sum表示動畫的基礎(chǔ)知識會附加到其他低優(yōu)先級的動畫上，

10. restart
    restart這個屬性誕生的背景如下：很多動畫呢，其觸發(fā)可能與事件相關(guān)，例如，點擊某圓圈，馬兒就跑。而且，似乎沒點一次，馬兒就跑一下?，F(xiàn)在，存在這種情況，希望馬兒只跑一次，之后在點擊就沒有反應(yīng)。這種需求的出現(xiàn)迫使restart參數(shù)的出現(xiàn)。支持的參數(shù)有：always | whenNotActive | never.

always是默認(rèn)值，表示總是，也就是點一次圈圈，馬兒跑一下。whenNotActive表示動畫正在進(jìn)行的時候，是不能重啟動畫的。never表示動畫是一波流。

11. min, max
    min/max表示動畫執(zhí)行最短和最長時間。支持參數(shù)為時間值和"media"（媒介元素有效）, max還支持indefinite.

動畫的暫停與播放

// svg指當(dāng)前svg DOM元素
// 暫停
svg.pauseAnimations();

// 重啟動
svg.unpauseAnimations()