互動性
SVG擁有良好的使用者互動性，例如：

1. SVG能響應大部分的DOM2事件。
2. SVG能通過cursor良好的捕捉使用者滑鼠的移動。
3. 使用者可以很方便的通過設定svg元素的zoomAndPan屬性的值來實現縮放等效果。

4. 使用者可以很方便的把動畫和事件結合起來，完成一些複雜的效果。

   通過給SVG元素掛接事件，我們可以使用指令碼語言方便的完成一些互動任務。SVG支援大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseup, onmousemove, onmouseout, onload, onresize, onscroll等事件。除了這些，SVG還提供了獨有的動畫相關的事件，比如：onroom,onbegin,onend,onrepeat等。
   事件大家比較熟悉，就不多說了。

動畫的方式
SVG採用的是使用文字來定義圖形，這種文件結構非常適合於建立動畫。要改變圖形的位置、大小和顏色，只需要調整相應的屬性就可以了。事實上，SVG有為各種事件處理而專門設計的屬性，甚至很多還是專門為動畫量身定做的。在SVG中，實現動畫可以有下面幾種方式：

1. 使用SVG的動畫元素。這個下面會重點介紹。
2. 使用指令碼。採用DOM操作啟動和控制動畫，這個已經是一門成熟的技術了，後面有一個小例子。

3. 下面的例子包含了SVG中幾種最基本的動畫：

<svg width="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg"
 
 version="1.1">
  <desc>基本動畫元素</desc>
  <rect x="1" y="1" width="798" height="298" 
        fill="none" stroke="blue" stroke-width="2" />
  <!-- 矩形位置和大小的動畫 -->
  <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>
  <!-- 建立新的使用者座標空間，所以text是從新的(0,0)開始，後續的變換都是針對新座標系的 -->
  <g transform="translate(100,100)" >
    <!-- 下面使用了set去動畫visibility，然後使用animateMotion,
 animate和animateTransform執行其他型別的動畫 -->
    <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中執行一下就可
以知道動畫的效果。
動畫元素的公共屬性

第一類：指定目標元素和屬性

xlink:href

這個應該是很熟悉了，指向執行動畫的元素。這個元素的必須是在當前的SVG文件片段中定義的。如果沒有指定這個屬性的話，動畫會應用到自己的父元素上。
attributeName = “”
這個屬性指定了應用動畫的屬性。如果該屬性有namespace的話(不要忘了，SVG本質是XML文件)，這個namespace也要加上。例如下面的例子中分別給xlink起了不同的別名，這裡animate指定屬性的時候就帶了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(預設值)”
這個屬性指定了屬性取值的名稱空間，這幾個值的含義如下：
CSS：代表attributeName指定的屬性是CSS屬性。
XML：代表attributeName指定的屬性是XML預設名稱空間下的屬性(注意svg文件本質上是xml文件)。
auto：代表先在CSS屬性中查詢attributeName指定的屬性，如果沒找到，則在預設的XML名稱空間下尋找該屬性。

第二類：控制動畫時間的屬性
下列屬性都是動畫時間屬性；它們控制了動畫執行的時間線，包括如何開始和結束動畫，是否重複執行動畫，是否儲存動畫的結束狀態等。
begin = “begin-value-list”
該屬性定義了動畫的開始時間。可以是分號分開的一系列時間值。也可以是一些其他觸發動畫開始的值。比如事件，快捷鍵等。
dur = Clock-value | “media” | “indefinite”
定義了動畫的持續時間。可以設定為以時鐘格式顯示的值。也可以設定為下列兩個值：
media：指定動畫的時間為內部多媒體元素的持續時間。
indefinite：指定動畫時間為無限。

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

02:30:03 = 2 hours, 30 minutes and 3 seconds
50:00:10.25 = 50 hours, 10 seconds and 250 milliseconds
02:33 = 2 minutes and 33 seconds
00:10.5 = 10.5 seconds = 10 seconds and 500 milliseconds
3.2h = 3.2 hours = 3 hours and 12 minutes
45min = 45 minutes
30s = 30 seconds
5ms = 5 milliseconds
12.467 = 12 seconds and 467 milliseconds
00.5s = 500 milliseconds
00:00.005 = 5 milliseconds

end = “end-value-list”
定義了動畫的結束時間。可以是分號分開的一系列值。
min = Clock-value | “media”
max = Clock-value | “media”
設定了動畫持續時間的最大最小值。
restart = “always” | “whenNotActive” | “never”
設定了動畫能否隨時重新開始。always代表動畫可以隨時開始。whenNotActive代表只能在沒播放的時候重新開始，比如前一次播放結束了。never表示動畫不能重新開始。
repeatCount = numeric value | “indefinite”
設定了動畫重複的次數。 indefinite代表無限重複。
repeatDur = Clock-value | “indefinite”
設定重複的總的動畫時間。indefinite代表無限重複。
fill = “freeze” | “remove(預設值)”
設定了動畫結束後元素的狀態。freeze表示動畫結束後元素停留在動畫的最後狀態。remove代表動畫結束以後元素回到動畫前的狀態，這個是預設值。

第三類：定義動畫值的屬性
這些屬性定義了被執行動畫的屬性的取值情況。其實是定義了關鍵幀和插值的一些演算法。
calcMode = “discrete | linear(預設值) | paced | spline”
定義了動畫插值的方式：discrete:離散的，不插值；linear：線性插值；paced：步長插值；spline:樣條插值。預設是linear(線性插值)，但是如果屬性不支援線性插值，則會採用discrete插值方式。
values = “list”
定義了以分號分隔的動畫關鍵幀的值列表。支援向量值。
keyTimes = “list”
定義了以分號分隔的動畫關鍵幀的時間列表。這個和values是一一對應的。這個值是受插值演算法影響的，如果是線性(linear)和樣條插值(spline)，則keyTimes的第一個值必須是0，最後一個值必須是1。對於離散(discrete)的不插值的方式，keyTimes的第一個值必須是0。對於步長插值方式，很顯然是不需要keyTimes。而且如果動畫的持續時間設定為indefinite，則忽略keyTimes。
keySplines = “list”
這個屬性定義了樣條插值(貝塞爾插值)時的控制點，顯然只有在插值模式選擇為spline才起作用。這個列表中的值取值範圍是0到1。
from = “value”
to = “value”
by = “value”
定義動畫屬性的起始值，結束值和步長值。這裡需要注意：如果values已經制定了相關的值，則任何的from/to/by值都會被忽略。
第四類：控制動畫是否是增量式的屬性
有時候，如果相關的值設定的不是絕對值，而是增量值是非常有用的，使用additive屬性可以達到這個目的。
additive = “replace(預設值) | sum”
這個屬性控制了動畫是否是增量式的。sum表示動畫會較大相關的屬性值或者其他低優先順序的動畫上。replace是預設值，表示動畫會覆蓋相關的屬性值或者其他低優先順序的動畫。看一個小例子：

<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum"/>
</rect>

這個例子演示了矩形width遞增的動畫效果。
有時候，如果重複的動畫結果是疊加起來的，也非常有用，使用accumulate屬性可以達到這個目的。
accumulate = “none(預設值) | sum”
這個屬性控制了動畫效果是否是累積的。none是預設值，表示重複的動畫不累積。sum表示重複的動畫效果是累積的。對於單次執行的動畫，該屬性沒有意義。看個小例子：

<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum" accumulate="sum" repeatCount="5"/>
</rect> 

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

動畫元素小結
SVG提供了下列動畫元素：
1. animate元素
這個是最基本的動畫元素，可以直接為相關屬性提供不同時間點的值。
2. set元素
這個是animate元素的簡寫形式，支援所有的屬性型別，尤其是當對非數字型的屬性(例如visibility)進行動畫時很方便。set元素是非增量的，相關的屬性對之無效。 to指定的動畫結束值型別一定要符合屬性的取值型別。
3. animateMotion元素
路勁動畫元素。這個元素大多數屬性都和上面一樣，只有下面幾個稍微有點區別：
calcMode = “discrete | linear | paced | spline”
這個屬性的預設值不同，在該元素中預設的是paced。
path = “”
動畫元素移動的路徑，格式與path元素的d屬性的值的格式是一致的。
keyPoints = “”
這個屬性的值是一系列分號給開的浮點數值，每個值的取值範圍是0~1。這些值代表了keyTimes屬性指定的對應時間點移動的距離，這裡距離具體是多少是由瀏覽器自己決定的。
rotate = | auto | auto-reverse”
這個屬性指定了元素移動時旋轉的角度。預設值是0，數字代表旋轉的角度，auto表示隨著路勁的方向轉動物體。auto-reverse表示轉向與移動方向相反的方向。
此外animateMotion元素的from,by,to,values的值都是座標對組成的；x值與y值之間用逗號或空格分開，每個座標對之間用分號隔開比如from=”33,15”表示起點x座標為33，y座標為15。
指定運動路徑的方式有兩種：一種為直接給path屬性賦值，一種為使用mpath元素作為animateMotionde的子元素指定路徑。如果同時使用這兩種方式，則使用mpath元素優先順序高。這兩種方式優先順序都比values,from,by,to高。
看一個小例子：

<?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元素
顏色動畫元素。這是一個過時的元素，基本上所有功能都可以用animate代替，所以還是不要用了。

5. animateTransform元素
變換動畫元素。看看特殊的一些屬性：
type = “translate | scale | rotate | skewX | skewY”
這個屬性指定了變換的型別，translate是預設值。
from,by和to的值相應的都是對應變換的引數，這個還是與前面講的變換是一致的。values則是一組分號隔開的這樣的值系列。

支援動畫效果的元素和屬性
基本上所有圖形元素(path,rect,ellipse,text,image…)，容器元素(svg, g, defs, use, switch, clipPath, mask…)都支援動畫。基本上大多數的屬性都支援動畫效果。詳細的說明請參看官方文件。

使用DOM實現動畫
SVG動畫也可以使用指令碼完成，DOM的詳細內容後面會介紹，這裡簡單看一個小例子：

<?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>