SVG擁有良好的用戶交互性：SVG能響應(yīng)大部分的DOM2事件,SVG能通過cursor良好的捕捉用戶鼠標(biāo)的移動(dòng)等等，感興趣的朋友可以了解下啊，或許本文對你學(xué)習(xí)動(dòng)畫有所幫助

交互性

SVG擁有良好的用戶交互性，例如：

1. SVG能響應(yīng)大部分的DOM2事件。

2. SVG能通過cursor良好的捕捉用戶鼠標(biāo)的移動(dòng)。

3. 用戶可以很方便的通過設(shè)置svg元素的zoomAndPan屬性的值來實(shí)現(xiàn)縮放等效果。

4. 用戶可以很方便的把動(dòng)畫和事件結(jié)合起來，完成一些復(fù)雜的效果。

通過給SVG元素掛接事件，我們可以使用腳本語言方便的完成一些交互任務(wù)。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll等事件。除了這些，SVG還提供了獨(dú)有的動(dòng)畫相關(guān)的事件，比如：onroom,onbegin,onend,onrepeat等。

事件大家比較熟悉，就不多說了。

動(dòng)畫的方式

SVG采用的是使用文本來定義圖形，這種文檔結(jié)構(gòu)非常適合于創(chuàng)建動(dòng)畫。要改變圖形的位置、大小和顏色，只需要調(diào)整相應(yīng)的屬性就可以了。事實(shí)上，SVG有為各種事件處理而專門設(shè)計(jì)的屬性，甚至很多還是專門為動(dòng)畫量身定做的。在SVG中，實(shí)現(xiàn)動(dòng)畫可以有下面幾種方式：

1. 使用SVG的動(dòng)畫元素。這個(gè)下面會(huì)重點(diǎn)介紹。

2. 使用腳本。采用DOM操作啟動(dòng)和控制動(dòng)畫，這個(gè)已經(jīng)是一門成熟的技術(shù)了，后面有一個(gè)小例子。

3. SMIL(Synchronized Multimedia Integration Language)。這個(gè)有興趣的請參考：http://www.w3.org/TR/2008/REC-SMIL3-20081201/。

下面的例子包含了SVG中幾種最基本的動(dòng)畫：

代碼如下:

<svg width="8cm" height="3cm"viewBox="0 0 800 300"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<desc>基本動(dòng)畫元素</desc>

<rect x="1" y="1" width="798" height="298"

fill="none" stroke="blue" stroke-width="2" />

<!-- 矩形位置和大小的動(dòng)畫 -->

<rect id="RectElement" x="300" y="100" width="300" height="100"

fill="rgb(255,255,0)">

<animate attributeName="x" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="0" />

<animate attributeName="y" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="100" to="0" />

<animate attributeName="width" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="800" />

<animate attributeName="height" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="100" to="300" />

</rect>

<!-- 創(chuàng)建新的用戶坐標(biāo)空間，所以text是從新的(0,0)開始，后續(xù)的變換都是針對新坐標(biāo)系的 -->

<g transform="translate(100,100)" >

<!-- 下面使用了set去動(dòng)畫visibility，然后使用animateMotion,

animate和animateTransform執(zhí)行其他類型的動(dòng)畫 -->

<text id="TextElement" x="0" y="0"

font-family="Verdana" font-size="35.27" visibility="hidden">

It's alive!

<set attributeName="visibility" attributeType="CSS" to="visible"

begin="3s" dur="6s" fill="freeze" />

<animateMotion path="M 0 0 L 100 100"

begin="3s" dur="6s" fill="freeze" />

<animate attributeName="fill" attributeType="CSS"

from="rgb(0,0,255)" to="rgb(128,0,0)"

begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"

type="rotate" from="-30" to="0"

begin="3s" dur="6s" fill="freeze" />

<animateTransform attributeName="transform" attributeType="XML"

type="scale" from="1" to="3" additive="sum"

begin="3s" dur="6s" fill="freeze" />

</text>

</g>

</svg>

把這段代碼放到html文檔的body中運(yùn)行一下就可以知道動(dòng)畫的效果。

動(dòng)畫元素的公共屬性

第一類：指定目標(biāo)元素和屬性

xlink:href

這個(gè)應(yīng)該是很熟悉了，指向執(zhí)行動(dòng)畫的元素。這個(gè)元素的必須是在當(dāng)前的SVG文檔片段中定義的。如果沒有指定這個(gè)屬性的話，動(dòng)畫會(huì)應(yīng)用到自己的父元素上。

attributeName = "<attributeName>"

這個(gè)屬性指定了應(yīng)用動(dòng)畫的屬性。如果該屬性有namespace的話(不要忘了，SVG本質(zhì)是XML文檔)，這個(gè)namespace也要加上。例如下面的例子中分別給xlink起了不同的別名，這里animate指定屬性的時(shí)候就帶了namespace：

代碼如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Demonstration of the resolution of namespaces for animation</title>

<g xmlns:a="http://www.w3.org/1999/xlink">

<animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>

</g>

<g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar">

<image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/>

</g>

</svg>

attributeType = "CSS | XML | auto(默認(rèn)值)"

這個(gè)屬性指定了屬性取值的命名空間，這幾個(gè)值的含義如下：

CSS：代表attributeName指定的屬性是CSS屬性。

XML：代表attributeName指定的屬性是XML默認(rèn)命名空間下的屬性(注意svg文檔本質(zhì)上是xml文檔)。

auto：代表先在CSS屬性中查找attributeName指定的屬性，如果沒找到，則在默認(rèn)的XML命名空間下尋找該屬性。

第二類：控制動(dòng)畫時(shí)間的屬性

下列屬性都是動(dòng)畫時(shí)間屬性；它們控制了動(dòng)畫執(zhí)行的時(shí)間線，包括如何開始和結(jié)束動(dòng)畫，是否重復(fù)執(zhí)行動(dòng)畫，是否保存動(dòng)畫的結(jié)束狀態(tài)等。

begin = "begin-value-list"

該屬性定義了動(dòng)畫的開始時(shí)間。可以是分號分開的一系列時(shí)間值。也可以是一些其他觸發(fā)動(dòng)畫開始的值。比如事件，快捷鍵等。

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í)間為無限。

時(shí)鐘格式指的是下列這些合法的取值格式：

代碼如下:

:30:03= 2 hours, 30 minutes and 3 seconds

:00:10.25 = 50 hours, 10 seconds and 250 milliseconds

:33 = 2 minutes and 33 seconds

:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds

.2h= 3.2 hours = 3 hours and 12 minutes

min = 45 minutes

s = 30 seconds

ms = 5 milliseconds

.467= 12 seconds and 467 milliseconds

.5s = 500 milliseconds

:00.005 = 5 milliseconds

end = "end-value-list"

定義了動(dòng)畫的結(jié)束時(shí)間?？梢允欠痔柗珠_的一系列值。

min = Clock-value | "media"

max = Clock-value | "media"

設(shè)置了動(dòng)畫持續(xù)時(shí)間的最大最小值。

restart = "always" | "whenNotActive" | "never"

設(shè)置了動(dòng)畫能否隨時(shí)重新開始。always代表動(dòng)畫可以隨時(shí)開始。whenNotActive代表只能在沒播放的時(shí)候重新開始，比如前一次播放結(jié)束了。never表示動(dòng)畫不能重新開始。

repeatCount = numeric value | "indefinite"

設(shè)置了動(dòng)畫重復(fù)的次數(shù)。 indefinite代表無限重復(fù)。

repeatDur = Clock-value | "indefinite"

設(shè)置重復(fù)的總的動(dòng)畫時(shí)間。indefinite代表無限重復(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)值。

第三類：定義動(dòng)畫值的屬性

這些屬性定義了被執(zhí)行動(dòng)畫的屬性的取值情況。其實(shí)是定義了關(guān)鍵幀和插值的一些算法。

calcMode = "discrete | linear(默認(rèn)值) | paced | spline"

定義了動(dòng)畫插值的方式：discrete:離散的，不插值；linear：線性插值；paced：步長插值；spline:樣條插值。默認(rèn)是linear(線性插值)，但是如果屬性不支持線性插值，則會(huì)采用discrete插值方式。

values = "<list>"

定義了以分號分隔的動(dòng)畫關(guān)鍵幀的值列表。支持向量值。

keyTimes = "<list>"

定義了以分號分隔的動(dòng)畫關(guān)鍵幀的時(shí)間列表。這個(gè)和values是一一對應(yīng)的。這個(gè)值是受插值算法影響的，如果是線性(linear)和樣條插值(spline)，則keyTimes的第一個(gè)值必須是0，最后一個(gè)值必須是1。對于離散(discrete)的不插值的方式，keyTimes的第一個(gè)值必須是0。對于步長插值方式，很顯然是不需要keyTimes。而且如果動(dòng)畫的持續(xù)時(shí)間設(shè)置為indefinite，則忽略keyTimes。

keySplines = "<list>"

這個(gè)屬性定義了樣條插值(貝塞爾插值)時(shí)的控制點(diǎn)，顯然只有在插值模式選擇為spline才起作用。這個(gè)列表中的值取值范圍是0到1。

from = "<value>"

to = "<value>"

by = "<value>"

定義動(dòng)畫屬性的起始值，結(jié)束值和步長值。這里需要注意：如果values已經(jīng)制定了相關(guān)的值，則任何的from/to/by值都會(huì)被忽略。

第四類：控制動(dòng)畫是否是增量式的屬性

有時(shí)候，如果相關(guān)的值設(shè)置的不是絕對值，而是增量值是非常有用的，使用additive屬性可以達(dá)到這個(gè)目的。

additive = "replace(默認(rèn)值) | sum"

這個(gè)屬性控制了動(dòng)畫是否是增量式的。sum表示動(dòng)畫會(huì)較大相關(guān)的屬性值或者其他低優(yōu)先級的動(dòng)畫上。replace是默認(rèn)值，表示動(dòng)畫會(huì)覆蓋相關(guān)的屬性值或者其他低優(yōu)先級的動(dòng)畫?？匆粋€(gè)小例子：

代碼如下:

<rect width="20px" ...>

<animate attributeName="width" from="0px" to="10px" dur="10s"

additive="sum"/>

</rect>

這個(gè)例子演示了矩形width遞增的動(dòng)畫效果。

有時(shí)候，如果重復(fù)的動(dòng)畫結(jié)果是疊加起來的，也非常有用，使用accumulate屬性可以達(dá)到這個(gè)目的。

accumulate = "none(默認(rèn)值) | sum"

這個(gè)屬性控制了動(dòng)畫效果是否是累積的。none是默認(rèn)值，表示重復(fù)的動(dòng)畫不累積。sum表示重復(fù)的動(dòng)畫效果是累積的。對于單次執(zhí)行的動(dòng)畫，該屬性沒有意義。看個(gè)小例子：

代碼如下:

<rect width="20px" ...>

<animate attributeName="width" from="0px" to="10px" dur="10s"

additive="sum" accumulate="sum" repeatCount="5"/>

</rect>

這個(gè)例子演示了矩形的長度在每次迭代中都在增加。

動(dòng)畫元素小結(jié)

SVG提供了下列動(dòng)畫元素：

1. animate元素

這個(gè)是最基本的動(dòng)畫元素，可以直接為相關(guān)屬性提供不同時(shí)間點(diǎn)的值。

2. set元素

這個(gè)是animate元素的簡寫形式，支持所有的屬性類型，尤其是當(dāng)對非數(shù)字型的屬性(例如visibility)進(jìn)行動(dòng)畫時(shí)很方便。set元素是非增量的，相關(guān)的屬性對之無效。 to指定的動(dòng)畫結(jié)束值類型一定要符合屬性的取值類型。

3. animateMotion元素

路勁動(dòng)畫元素。這個(gè)元素大多數(shù)屬性都和上面一樣，只有下面幾個(gè)稍微有點(diǎn)區(qū)別：

calcMode = "discrete | linear | paced | spline"

這個(gè)屬性的默認(rèn)值不同，在該元素中默認(rèn)的是paced。

path = "<path-data>"

動(dòng)畫元素移動(dòng)的路徑，格式與path元素的d屬性的值的格式是一致的。

keyPoints = "<list-of-numbers>"

這個(gè)屬性的值是一系列分號給開的浮點(diǎn)數(shù)值，每個(gè)值的取值范圍是0~1。這些值代表了keyTimes屬性指定的對應(yīng)時(shí)間點(diǎn)移動(dòng)的距離，這里距離具體是多少是由瀏覽器自己決定的。

rotate = <number> | auto | auto-reverse"

這個(gè)屬性指定了元素移動(dòng)時(shí)旋轉(zhuǎn)的角度。默認(rèn)值是0，數(shù)字代表旋轉(zhuǎn)的角度，auto表示隨著路勁的方向轉(zhuǎn)動(dòng)物體。auto-reverse表示轉(zhuǎn)向與移動(dòng)方向相反的方向。

此外animateMotion元素的from,by,to,values的值都是坐標(biāo)對組成的；x值與y值之間用逗號或空格分開，每個(gè)坐標(biāo)對之間用分號隔開比如from="33,15"表示起點(diǎn)x坐標(biāo)為33，y坐標(biāo)為15。

指定運(yùn)動(dòng)路徑的方式有兩種：一種為直接給path屬性賦值，一種為使用mpath元素作為animateMotionde的子元素指定路徑。如果同時(shí)使用這兩種方式，則使用mpath元素優(yōu)先級高。這兩種方式優(yōu)先級都比values,from,by,to高。

看一個(gè)小例子：

代碼如下:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="5cm" height="3cm"viewBox="0 0 500 300"

xmlns="http://www.w3.org/2000/svg" version="1.1"

xmlns:xlink="http://www.w3.org/1999/xlink" >

<rect x="1" y="1" width="498" height="298"

fill="none" stroke="blue" stroke-width="2" />

<path id="path1" d="M100,250 C 100,50 400,50 400,250"

fill="none" stroke="blue" stroke-width="7.06"/>

<circle cx="100" cy="250" r="17.64" fill="blue"/>

<circle cx="250" cy="100" r="17.64" fill="blue"/>

<circle cx="400" cy="250" r="17.64" fill="blue"/>

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

fill="yellow" stroke="red" stroke-width="7.06">

<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >

<mpath xlink:href="#path1"/>

</animateMotion>

</path>

</svg>

4. animateColor元素

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

5. animateTransform元素

變換動(dòng)畫元素?？纯刺厥獾囊恍傩裕?/P>

type = "translate | scale | rotate | skewX | skewY"

這個(gè)屬性指定了變換的類型，translate是默認(rèn)值。

from,by和to的值相應(yīng)的都是對應(yīng)變換的參數(shù)，這個(gè)還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。

支持動(dòng)畫效果的元素和屬性

基本上所有圖形元素(path,rect,ellipse,text,image...)，容器元素(svg, g, defs, use, switch, clipPath, mask...)都支持動(dòng)畫?；旧洗蠖鄶?shù)的屬性都支持動(dòng)畫效果。詳細(xì)的說明請參看官方文檔。

使用DOM實(shí)現(xiàn)動(dòng)畫

SVG動(dòng)畫也可以使用腳本完成，DOM的詳細(xì)內(nèi)容后面會(huì)介紹，這里簡單看一個(gè)小例子：

代碼如下:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="4cm" height="2cm" viewBox="0 0 400 200"

xmlns="http://www.w3.org/2000/svg"

onload="StartAnimation(evt)" version="1.1">

<script type="application/ecmascript"><![CDATA[

var timevalue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

function StartAnimation(evt) {

text_element = evt.target.ownerDocument.getElementById("TextElement");

ShowAndGrowElement();

}

function ShowAndGrowElement() {

timevalue = timevalue + timer_increment;

if (timevalue > max_time)

return;

// Scale the text string gradually until it is 20 times larger

scalefactor = (timevalue * 20.) / max_time;

text_element.setAttribute("transform", "scale(" + scalefactor + ")");

// Make the string more opaque

opacityfactor = timevalue / max_time;

text_element.setAttribute("opacity", opacityfactor);

// Call ShowAndGrowElement again <timer_increment> milliseconds later.

setTimeout("ShowAndGrowElement()", timer_increment)

}

window.ShowAndGrowElement = ShowAndGrowElement

]]></script>

<rect x="1" y="1" width="398" height="198"

fill="none" stroke="blue" stroke-width="2"/>

<g transform="translate(50,150)" fill="red" font-size="7">

<text id="TextElement">SVG</text>

</g>

</svg>