SVG采用的是使用文本來定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動畫。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實上，SVG有為各種事件處理而專門設(shè)計的屬性，甚至很多還是專門為動畫量身定做的。在SVG中，實現(xiàn)動畫通常使用SVG SMIL animation。
通過SMIL可以實現(xiàn)的基本動畫：
·動畫元素的數(shù)值屬性（X, Y, …）
·動畫屬性變換（平移或旋轉(zhuǎn)）
·動畫顏色屬性
·沿著運動路徑運動（這一點非常有趣）
對svg動畫瀏覽器兼容情況：
可以看到ie都不支持svg動畫，移動端andriod4.1才開始支持svg動畫。
1. animate元素
這個是最基本的動畫元素，可以直接為相關(guān)屬性提供不同時間點的值。
2. set元素
這個是animate元素的簡寫形式，支持所有的屬性類型，尤其是當對非數(shù)字型的屬性(例如visibility)進行動畫時很方便。set元素是非增量的，相關(guān)的屬性對之無效。 to指定的動畫結(jié)束值類型一定要符合屬性的取值類型。
3. animateMotion元素
路勁動畫元素。
4. animateColor元素
顏色動畫元素。這是一個過時的元素，基本上所有功能都可以用animate代替，所以還是不要用了。
5. animateTransform元素
變換動畫元素。看看特殊的一些屬性：
type = "translate | scale | rotate | skewX | skewY"
這個屬性指定了變換的類型，translate是默認值，這里的rotate是以svg容器的端點為圓心旋轉(zhuǎn)。
from,by和to的值相應(yīng)的都是對應(yīng)變換的參數(shù)，這個還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。
支持動畫效果的元素和屬性
基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動畫?；旧洗蠖鄶?shù)的屬性都支持動畫效果。
animate元素--基本元素動畫
<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動畫，可以方便設(shè)置延遲
<!-- set 可以實現(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動畫
1 2 3 4 5 6 | <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">hello <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="40" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /></svg> |
animateTransform動畫
<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>
要變化的元素屬性名稱，① 可以是元素直接暴露的屬性，例如，對于本文反復(fù)出現(xiàn)的「馬」對應(yīng)的text元素上的x, y或者font-size; ② 可以是CSS屬性。例如，透明度opacity.
attributeType = “CSS | XML | auto”
這個屬性指定了屬性取值的命名空間，這幾個值的含義如下：
CSS：代表attributeName指定的屬性是CSS屬性。
XML：代表attributeName指定的屬性是XML默認命名空間下的屬性(注意svg文檔本質(zhì)上是xml文檔)。
auto：代表先在CSS屬性中查找attributeName指定的屬性，如果沒找到，則在默認的XML命名空間下尋找該屬性。
注意：如果你不確信某屬性是XML類別還是CSS類別的時候，我的建議是不設(shè)置attributeType值，直接讓瀏覽器自己去判斷
begin = "begin-value-list"
該屬性定義了動畫的開始時間?？梢允欠痔柗珠_的一系列時間值。也可以是一些其他觸發(fā)動畫開始的值。比如事件，快捷鍵等。
dur = Clock-value | "media" | "indefinite"
定義了動畫的持續(xù)時間?？梢栽O(shè)置為以時鐘格式顯示的值。也可以設(shè)置為下列兩個值：
media：指定動畫的時間為內(nèi)部多媒體元素的持續(xù)時間。
indefinite：指定動畫時間為無限。
repeatCount = numeric value | "indefinite"
設(shè)置了動畫重復(fù)的次數(shù)。 indefinite代表無限重復(fù)。
repeatDur = Clock-value | "indefinite"
設(shè)置重復(fù)的總的動畫時間。indefinite代表無限重復(fù)。
fill = "freeze" | "remove(默認值)"
設(shè)置了動畫結(jié)束后元素的狀態(tài)。freeze表示動畫結(jié)束后元素停留在動畫的最后狀態(tài)。remove代表動畫結(jié)束以后元素回到動畫前的狀態(tài)，這個是默認值。
參考資料：
突襲HTML5之SVG 2D入門（svg教程寫的很全，推薦指數(shù)5星）
SVG 教程（w3school的svg教程，也不錯）
mozilla svg教程（推薦給喜歡看英文教程的朋友）
知乎上面對svg的一些討論（大家在使用時，有必要可以看一下）
推薦svg庫：
聯(lián)系客服
