你可以把這篇文章看做通往精通SVG動畫之路的第一步孙乖，里面的鏈接資源也是很好的學習資料。所以趕緊收藏本文然后開始你的精通SVG之旅吧份氧。
SVG元素是一種特殊的DOM元素唯袄，語法模仿了標準的HTML元素。SVG元素有著獨有的標簽蜗帜，屬性和行為恋拷，能夠讓它很容易的定義各種形狀——能夠直接在DOM中創(chuàng)造圖像，因此能夠被JavaScript和CSS操作厅缺。
作為初學者蔬顾，你們可以看看這些SVG才能實線的效果：
在此有三個使用SVG創(chuàng)建圖像而不是用圖片(PNG, JPET, etc)的好處：
- 首先SVG可以被壓縮的很好。
- 其次湘捎，SVG可以在無損的情況下縮放到任何尺寸诀豁，在桌面和移動設備屏幕上看起來都很銳利。
- 最后窥妇，你可以在運行的時候(使用JavaScript舷胜，CSS)只讓SVG圖像的一個組件動畫。
創(chuàng)造SVG圖像活翩，你即可以直接使用其DOM元素呈現(xiàn)烹骨，也可以使用你喜愛的圖像編輯軟件繪畫然后導出SVG文件拷貝它的代碼粘貼到HTML中即可。對于初學者材泄，可以看這篇很棒的文章:Working With SVG沮焕。
SVG動畫
無論jQuery還是CSS transitions都沒提供SVG動畫樣式屬性(位置，尺寸屬性)的完整支持拉宗。在IE 9 中不容許CSS transitions動畫SVG元素遇汞，在IE所有版本中也不能使用CSS transforms動畫SVG元素。
因此，要動畫SVG元素空入，你要么使用專門的SVG操控庫络它，或者使用支持SVG的JavaScript動畫庫。前者最有名的是Snap.svg歪赢，后者則是Velocity.js化戳，Velocity.js輕量而且跨瀏覽器支持良好，是wen動畫的絕佳選擇埋凯，本文的例子就使用的事這個動畫庫点楼。
在需要動畫SVG元素的時候Velocity.js會自動檢測，然后無縫的對其施加SVG的特定屬性而無需你更改任何代碼白对。
SVG樣式
SVG元素只接受少數(shù)的幾個標準的CSS屬性掠廓，另外SVG接受一些“表意性(presentational)”，譬如fill甩恼，x蟀瞧，y。這些屬性也用來定義SVG如何渲染条摸。通過CSS定義SVG樣式和直接在SVG元素上使用這些屬性悦污，本身在功能上沒什么不同，SVG規(guī)范中也很少區(qū)分討論钉蒲。
下面的例子中SVG的circle元素和緊接著的SVGrect元素兩者都包含在一個聲明性(mandatory)的SVG容器元素中(這樣也就告訴瀏覽器里面包含的是SVG標記而不是HTML標記)切端。請注意窄陡，顏色是如何通過CSS定義丧叽，而尺寸又是如何通過屬性定義屎慢。
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="200" style="fill: blue" />
<rect x="100" y="100" width="200" height="200" style="fill: blue" />
</svg>
(還有一些其他的SVG元素抡草，譬如ellipse，line痊班，text等淘菩，更多可以查看MDN)贮乳。
SVG樣式屬性有三大類：color仪搔，gradient，dimensional和storke蜻牢。查看SVG元素的CSS動畫屬性和表現(xiàn)屬性的完整列表可以訪問Velocity.js的SVG animation documentation烤咧。
CSS屬性包含fill和stroke，fill相當于background-color抢呆，而stroke也就相當與border-color煮嫌。使用Velocity，這些屬性的動畫的方式和標準的屬性并無二致抱虐。
// Animate the SVG element to a red fill and a black stroke
$svgElement.velocity({ fill: "#ff0000", stroke: "#000000" });
// Note that the following WON'T work since these CSS properties are NOT supported by SVG:
$svgElement.velocity({ backgroundColor: "#ff0000", borderColor: "#000000" });
gradient漸變屬性包含stopColor昌阿，stopOpacity，offset。用他們你可以構(gòu)造出任何你想要的漸變效果懦冰。了解更多可以查看MDN's SVG Gradient Guide灶轰。
dimensional維度(尺寸，空間)屬性描述了SVG元素的位置和尺寸刷钢。這些屬性和SVG的形狀元素有些輕微的不同笋颤。
// Unlike HTML, SVG positioning is NOT defined with top/right/bottom/left, float, or margin properties
// Rectangles have their x (left) and y (top) values defined relative to their top-left corner
$("rect").velocity({ x: 100, y: 100 });
// In contrast, circles have their x and y values defined relative to their center (hence, cx and cy properties)
$("circle").velocity({ cx: 100, cy: 100 });
// Rectangles have their width and height defined the same way that DOM elements do
$("rect").velocity({ width: 200, height: 200 });
// Circles have no concept of "width" or "height"; instead, they take a radius attribute (r):
$("circ").velocity({ r: 100 });
Stroke筆畫屬性是特殊的SVG的樣式屬性，和CSS中的border類似内地，但不同的兩點式伴澄，可以創(chuàng)造自己的筆畫Strokes，還可以動畫筆畫阱缓。用例包括書寫效果非凌，和逐漸顯露等。更多SVG Stroke動畫可以查看SVG Line Animation荆针。
將這些放到一起敞嗡，使用Velocity.js的Demo：http://codepen.io。
位置屬性 vs. CSS Transforms
你或許想知道使用x/cx y/cy位置屬性和CSS transforms(譬如祭犯，translateX秸妥，translateY)的區(qū)別在哪里？答案便是瀏覽器的支持沃粗，IE(包括IE11)不支持SVG元素的CSS transforms粥惧。而對于硬件加速來說，所有的瀏覽器(包括IE)都默認支持位置屬性的硬件加速——因此最盅，對于SVG的動畫性能突雪，SVG屬性和CSS屬性相等。
總結(jié)：
/ The x and y attributes work everywhere that SVG elements do (IE8+, Android 3+)
$("rect").velocity({ x: 100, y: 100 });
// Alternatively, positional transforms (such as *translateX* and *translateY*) work everywhere EXCEPT IE
$("rect").velocity({ translateX: 100, translateY: 100 });
深入了解
通過本篇涡贱，再配合MDN's SVG guide你便可以更好的使用SVG啦咏删！
