、svg動(dòng)畫SMIL

      SVG采用的是使用文本來(lái)定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動(dòng)畫。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實(shí)上，SVG有為 各種事件處理而專門設(shè)計(jì)的屬性，甚至很多還是專門為動(dòng)畫量身定做的。在SVG中，實(shí)現(xiàn)動(dòng)畫通常使用SVG SMIL animation。
      通過(guò)SMIL可以實(shí)現(xiàn)的基本動(dòng)畫：
      ·動(dòng)畫元素的數(shù)值屬性（X, Y, …）
      ·動(dòng)畫屬性變換（平移或旋轉(zhuǎn)）
      ·動(dòng)畫顏色屬性
      ·沿著運(yùn)動(dòng)路徑運(yùn)動(dòng)（這一點(diǎn)非常有趣）

　　對(duì)svg動(dòng)畫瀏覽器兼容情況：

　　可以看到ie都不支持svg動(dòng)畫，移動(dòng)端andriod4.1才開(kāi)始支持svg動(dòng)畫。

二、svg動(dòng)畫元素

　　1. animate元素
    　　  這個(gè)是最基本的動(dòng)畫元素，可以直接為相關(guān)屬性提供不同時(shí)間點(diǎn)的值。
　　2. set元素
      　　這個(gè)是animate元素的簡(jiǎn)寫形式，支持所有的屬性類型，尤其是當(dāng)對(duì)非數(shù)字型的屬性(例如visibility)進(jìn)行動(dòng)畫時(shí)很方便。set元素是非增量的，相關(guān)的屬性對(duì)之無(wú)效。 to指定的動(dòng)畫結(jié)束值類型一定要符合屬性的取值類型。
　　3. animateMotion元素
      　　路勁動(dòng)畫元素。

　　4. animateColor元素
      顏色動(dòng)畫元素。這是一個(gè)過(guò)時(shí)的元素，基本上所有功能都可以用animate代替，所以還是不要用了。

　　5. animateTransform元素

　　　變換動(dòng)畫元素?？纯刺厥獾囊恍傩裕?br> 　　 type = "translate | scale | rotate | skewX | skewY"
      這個(gè)屬性指定了變換的類型，translate是默認(rèn)值，這里的rotate是以svg容器的端點(diǎn)為圓心旋轉(zhuǎn)。
      from,by和to的值相應(yīng)的都是對(duì)應(yīng)變換的參數(shù)，這個(gè)還是與前面講的變換是一致的。values則是一組分號(hào)隔開(kāi)的這樣的值系列。

　　支持動(dòng)畫效果的元素和屬性
      基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動(dòng)畫?；旧洗蠖鄶?shù)的屬性都支持動(dòng)畫效果。

 　　animate元素--基本元素動(dòng)畫

<svg width="200" height="200" >
  <rect x="0" y="40" width="200" height="200" fill="rgba(0,0,0,.4)"  />
    <text font-family="microsoft yahei" font-size="40" y="80" x="0" fill="red" stroke="green" stroke-width="1">
      hello
      <animate attributeName="x" attributeType="XML" from="0" to="100" begin="0s" dur="2s" repeatCount="indefinite"/>
    </text>
</svg>

　　set動(dòng)畫，可以方便設(shè)置延遲

<!-- set 可以實(shí)現(xiàn)基本的延遲功能 -->
<svg width="200" height="200" >
  <rect x="0" y="40" width="200" height="200" fill="rgba(0,0,0,.4)"  />
    <text font-family="microsoft yahei" font-size="40" y="80" x="0" fill="red" stroke="green" stroke-width="1">
      hello
      <set attributeName="x" attributeType="XML" to="80" begin="3s" />
    </text>
</svg>

　　animateMotion動(dòng)畫

　　animateTransform動(dòng)畫

<svg width="200" height="200" >
  <rect x="0" y="40" width="200" height="200" fill="rgba(0,0,0,.4)"  />
    <text font-family="microsoft yahei" font-size="40" y="80" x="0" fill="red" stroke="green" stroke-width="1">
      hello
      <animate attributeName="x" attributeType="XML" from="0" to="100" begin="0s" dur="2s" repeatCount="indefinite"/>
      <animateTransform attributeName="transform" type="scale" from="1" to="1.2" begin="0s" dur="2s" repeatCount="indefinite"/>
    </text>
</svg>

　　相關(guān)屬性解釋：

　　attributeName = <attributeName>

　　要變化的元素屬性名稱，① 可以是元素直接暴露的屬性，例如，對(duì)于本文反復(fù)出現(xiàn)的「馬」對(duì)應(yīng)的text元素上的x, y或者font-size; ② 可以是CSS屬性。例如，透明度opacity.

　　attributeType = “CSS | XML | auto”

　　這個(gè)屬性指定了屬性取值的命名空間，這幾個(gè)值的含義如下：
　　CSS：代表attributeName指定的屬性是CSS屬性。
　　XML：代表attributeName指定的屬性是XML默認(rèn)命名空間下的屬性(注意svg文檔本質(zhì)上是xml文檔)。
　　auto：代表先在CSS屬性中查找attributeName指定的屬性，如果沒(méi)找到，則在默認(rèn)的XML命名空間下尋找該屬性。

　　注意：如果你不確信某屬性是XML類別還是CSS類別的時(shí)候，我的建議是不設(shè)置attributeType值，直接讓瀏覽器自己去判斷

 　　begin = "begin-value-list"
      該屬性定義了動(dòng)畫的開(kāi)始時(shí)間?？梢允欠痔?hào)分開(kāi)的一系列時(shí)間值。也可以是一些其他觸發(fā)動(dòng)畫開(kāi)始的值。比如事件，快捷鍵等。

 　　dur = Clock-value | "media" | "indefinite"
      定義了動(dòng)畫的持續(xù)時(shí)間?？梢栽O(shè)置為以時(shí)鐘格式顯示的值。也可以設(shè)置為下列兩個(gè)值：
　　media：指定動(dòng)畫的時(shí)間為內(nèi)部多媒體元素的持續(xù)時(shí)間。
　　indefinite：指定動(dòng)畫時(shí)間為無(wú)限。

　　repeatCount = numeric value | "indefinite"
　　設(shè)置了動(dòng)畫重復(fù)的次數(shù)。 indefinite代表無(wú)限重復(fù)。

　　repeatDur = Clock-value | "indefinite"
　　設(shè)置重復(fù)的總的動(dòng)畫時(shí)間。indefinite代表無(wú)限重復(fù)。

　　 fill = "freeze" | "remove(默認(rèn)值)"
　　設(shè)置了動(dòng)畫結(jié)束后元素的狀態(tài)。freeze表示動(dòng)畫結(jié)束后元素停留在動(dòng)畫的最后狀態(tài)。remove代表動(dòng)畫結(jié)束以后元素回到動(dòng)畫前的狀態(tài)，這個(gè)是默認(rèn)值。

參考資料：

　　突襲HTML5之SVG 2D入門（svg教程寫的很全，推薦指數(shù)5星）

　　SVG 教程（w3school的svg教程，也不錯(cuò)）

　　mozilla svg教程（推薦給喜歡看英文教程的朋友）

　　超級(jí)強(qiáng)大的SVG SMIL animation動(dòng)畫詳解

　　w3cplus大漠博客上的svg教程

　　基本 SVG 動(dòng)畫

　　知乎上面對(duì)svg的一些討論（大家在使用時(shí)，有必要可以看一下）

　　svg動(dòng)畫推薦

推薦svg庫(kù)：

　　Walkway

　　chartist-js

　　progressbar.js

　　raphaeljs

　　bonsaijs