一：簡介       由於Web是一個動態的媒介，SVG有支援實時動畫能力。SVG的內容可以使用下面的方式新增動畫：       1.使用SVG動畫元素SVG文件片段可以描述基於時間對文件元素的修改。通過各種各樣的動畫元素，你可以定義動畫的軌跡，淡入淡出效果，和物件的增大，縮小旋轉或者改變顏色。       2. 使用SVG DOM。SVG DOM實現了DOM1和DOM2規範的主要部分。每一個屬性和樣式表對指令碼來說是可訪問的，並且SVG為了支援有效地動畫指令碼提供了附加的DOM介面。結果，實際當中任意型別的動畫都可以取得。在指令碼語言中的計時設定可以用來啟動和控制動畫元素。       3.SVG被設計成允許SMIL來使用動態和靜態的SVG內容作為媒體元件。 二：動畫元素 1.概要      SVG的動畫元素是和SMIL開發組合作開發的。SMIL開發組和SVG開發組合作開發了SMIL動畫規範，在規範中制定了一個基本的XML動畫特徵集合。SVG吸收了SMIL動畫規範當中的動畫優點，並提供了一些SVG繼承實現。在任意的支援SMIL動畫的語言中，想尋求一份介紹方法和特徵並值得信賴的文件，可以參考： SMIL Animation overview 和   SMIL Animation animation model。但是對於下列的不在SMIL動畫規範中的動畫特徵可以參考：SVG extensions to SMIL Animation。 2.同SMIL動畫的關係      參照SMIL動畫，SVG是一種客戶端語言，並且在本分規範當中介紹講解附加的約束和規範是合理的。除了在任意的SVG規則特別提到的，正常在SVG動畫元素和屬性是在SMIL規範當中的。       SVG支援下列定義在SMIL動畫規範中的動畫元素。

動畫元素名稱	描述
"animate"	可以實時的改變標準的屬性和屬性值的取值
"set"	一個"animate"的簡化集合，被用來修改非數值型別的屬性值產生動畫，例如"visibility"屬性
"animateMotion"	沿著一個動畫路徑來移動元素
"animateColor"	實時的修改特定的顏色值產生動畫

儘管SVG定義了"animateColor"，但是它已經被棄用了，替代它的是"animate"元素。除此之外，SVG還引入了下列可以相容SMIL動畫的繼承：

名稱	描述
"animateTransform"	實時的修改一個SVG的transformation屬性，例如"transform"屬性
"path"	SVG允許用SVG的路徑屬性來為一個"animateMotion"元素指定一個"path"屬性
"mpath"	SVG允許一個"animateMotion"元素含有子屬性"mpath"來引用一個SVG的"path"元素作為指定的動畫路徑
"keyPoints"	SVG在"animateMotion"上面添加了一個"keypoints"屬性精確地控制路徑動畫的速率。
"rotate"	SVG在"animateMotion"上添加了一個"rotate"屬性控制一個圖形在沿路徑運動的時候是否沿X軸方向偏轉一個角度

為了相容其他方面的語言，SVG使用IRI references的一個‘xlink:href’屬性來表示可以作為動畫目標的元素，就像SMIL3.0中宣告的一樣。 SMIL動畫要求客戶端語言定義文件開始和文件結束。由於一個"svg"有時可以作為一個XML文件樹的根節點，有時可以作為一個XML父節點語法的元件，文件開始是一個給定的SVG文件被定義並在SVG元素的SVGLoad event觸發時下載。一個SVG文件片段的文件結束是在在這一點上文件片段被釋放並不在被使用者代理處理。然而，在一個SVG文件當中巢狀的SVG元素在這種情形下不會產生文件片段，並且不會定義一個獨立的文件開始；巢狀的文件片段一直與為根"svg"元素定義的文件時間相關聯。 對SVG來說，呈現時期表示著與一個給定的SVG文件片段的文件開始相關聯的時間線的一個位置。SVG定義了比SMIL動畫規範定義了更多的約束錯誤的處理。SMIL動畫定義了在特定錯誤情形下錯誤處理行為，然而所有在SVG文件中的動畫元素將因文件中任一個錯誤而停止。 3.動畫元素示例 下面的示例展示了五種動畫元素當中的每一種：

<?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="8cm" height="3cm"  viewBox="0 0 800 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example anim01 - demonstrate animation elements</desc>
  <rect x="1" y="1" width="798" height="298" 
        fill="none" stroke="blue" stroke-width="2" />
  <!-- The following illustrates the use of the 'animate' element
        to animate a rectangles x, y, and width attributes so that
        the rectangle grows to ultimately fill the viewport. -->
  <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>
  <!-- Set up a new user coordinate system so that
        the text string's origin is at (0,0), allowing
        rotation and scale relative to the new origin -->
  <g transform="translate(100,100)" >
    <!-- The following illustrates the use of the 'set', 'animateMotion',
         'animate' and 'animateTransform' elements. The 'text' element 
         below starts off hidden (i.e., invisible). At 3 seconds, it:
           * becomes visible
           * continuously moves diagonally across the viewport
           * changes color from blue to dark red
           * rotates from -30 to zero degrees
           * scales by a factor of three. -->
    <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 data-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>

4.用於表示動畫目標元素的屬性 下列的動畫屬性通用所有的動畫元素並標識了動畫的目標元素。屬性定義： xlink:href="<iri>"       一個到元素的IRI reference，可以表示動畫的目標並實時的修改。目標元素必須是當前文件片段的一部分。<iri> 必須準確的指定一個目標元素，這個目標元素可以可以成為給定動畫的目標元素。如果<iri>指向多個目標元素，如果 給定的目標元素不可以附加指定的動畫，如果給定的目標元素不是當前SVG文件片段的一部分，那麼文件會發生錯誤。如果"xlink:href"屬性沒有被提供，那麼目標元素將是當前動畫元素的父元素。        參考獨立動畫在可作為特定的動畫目標元素的型別約束的描述。除了在這份規範中明確提出的SVG特別的規則，這個屬性的標準定義是在SMIL動畫規範當中。特別地，參考：SMIL Animation: Specifying the animation target 5.用於標識一個動畫元素的目標屬性 下面的屬性都是動畫元素目標屬性，它們標識了實時改變的給定元素的屬性值。屬性定義： attributeName="<attributeName>":                             指定目標屬性的名稱。一個XMLNS字首可以用來指明XML名稱空間的屬性。在當前的動畫元素範圍內，這個字首可以被解讀。除了在這份規範中明確提出的SVG特別的規則，這個屬性的標準定義是在SMIL動畫規範當中。特別地，參考：SMIL Animation: Specifying the animation target attributeType="CSS|XML|auto"                            指定了與目標屬性相關聯的名稱空間並定義了相關的值。屬性值是下面中的一個： CSS:這表明了，在這份規範當中，"attributeName"是一個可動畫的CSS屬性的名字。 XML:這指明瞭"attributeName"是一個為目標元素定義在預設的XML名稱空間的XML屬性的名字。如果"attributeName"的值帶有一個XMLNS的            字首，那麼實現必須使用在定義在目標元素的相關聯的名稱空間。在規範當中，這個屬性必須定義為可動畫的。 auto: 實現應該匹配"attributeName"到目標元素的一個屬性。這個實現必須先搜尋CSS屬性值列表作為一個匹配的屬性值，如果沒有範閒，再          為目標元素搜尋預設的XML名稱空間。預設值是"auto"。 6.帶名稱空間的動畫 下面的例子展示了在引用元素的範圍內，一個名稱空間字首被解析成為一個名稱空間，並且這個名稱空間名稱被用來標識被附加動畫的屬性：

<?xml version="1.0" encoding="UTF-8"?>
<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>
  <!-- at the point of definition, the QName a:href resolves to the namespace
       name "http://www.w3.org/1999/xlink" and the local name "href" -->
  <g xmlns:a="http://www.w3.org/1999/xlink">
    <animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" fill="freeze"/>
  </g>
  <!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"
       happens to be bound to the namespace prefix 'b' while the prefix
       'xlink' is bound to a different namespace name -->
  <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>

7.動畫步調和複合型別 步調的動畫通過"to","from","by"和"values"等各種各樣的動畫值提出了距離的概念。距離是為了被"aniamteTransform"支援的縮放型別，顏色和變幻型別的子集。在下面的距離函式列表中，V_a和 V_{b代表了兩個值，它們之間的距離被計算。由於步調動畫打算產生一個同步於變化的動畫，那麼為所有資料型別定義距離函式是沒有意義的。距離可以為那些值為n維向量的型別被有效地定義。例如：一個<length>值是一個標量值，一個<color>值是一個三維向量。因此這些型別的屬性可以讓步調動畫應用到它們上面。另一方面，一個<list-of-length>是一個標量的序列，並且<list-of-points>是一個二維向量的序列。因而這些型別不會有一個距離函式的定義並且不能有步調動畫應用到它們上面。被步調動畫所支援型別的距離函式如下所示： <coordinate>,<integer>,<length>,<number>}         distance(V_a, V_b) = |V_a− V_b|         <color>         distance(V_a, V_b) = sqrt((V_a.red − V_b.red)²+ (V_a.green − V_b.green)²+ (V_a.blue − V_b.blue)²), where:        V_i.red is the red component of the V_icolor value,       V_i .green is the green component of the V_icolor value, and       V_i .blue is the blue component of the V_icolor value. Transform定義中的"translate"型別       distance(V_a, V_b) = sqrt((V_a.tx − V_b.tx)²+ (V_a.ty − V_b.ty)²), where:       V_i.tx is thexcomponent of the V_itranslation transform value, and       V_i.ty is theycomponent of the V_itranslation transform value. Transform定義中的"scale"型別       distance(V_a, V_b) = sqrt((V_a.sx − V_b.sx)²+ (V_a.sy − V_b.sy)²), where:       V_i.sx is thexcomponent of the V_iscale transform value, and       V_i.sy is theycomponent of the V_iscale transform value. Transform定義中的"rotate","skewX","skewY"型別      distance(V_a, V_b) = sqrt((V_a.angle − V_b.angle)²), where:      V_i.angle is the angle component of the V_irotation or skew transform value.            其他資料型別的距離函式沒有定義。如果calcMode="paced"被用到一個不是上面列出的型別動畫屬性上，那麼動畫的效果將是undefined。SVG使用者代理可以選擇演示動畫就像calcMode="linear"，但是這是不必要的。使用者被推薦不要指定步調動畫的型別不是上面列出的。 8.控制動畫時間的屬性 下面的屬性是動畫時間屬性。它們通用於所有的動畫元素並且控制動畫的事件，包括引起動畫的開始和結束，動畫是否重複執行，動畫是否在結束時保持結束時的狀態。在語法描述中，下面可選的空白被指明為"S",定義如下：S ::= (#x20 | #x9 | #xD | #xA)* 屬性定義：     定義了元素開始的時間。屬性值是用分號分隔的值序列。      begin-value-list ::=begin-value(S? ";" S? begin-value-list )?             描述元素的起始     offset-value ::= ( S? "+" | "-" S? )? (Clock-value)            對SMIL動畫來說 ，它描述了元素起始作為一個從隱式實時資料庫的補償。對SVG，隱式實時資料庫被定義為相關的文件起始。Negative起始時                間是完全有效地並易於計算， 只要它是一個確定的文件起始時間。     syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ("+"|"-") S?Clock-value)?           描述了一個實時資料庫和一個從這個實時資料庫的可選擇性補償。元素的起始時間被定義關聯於另一個動畫的開始時間或者活動時間。一個實時           資料庫是由一個指向另外一個被跟隨著開始或者結束來表示是否同步於引用動畫元素的開始或者結束的動畫元素的ID引用組成的。     event-value ::= ( Id-value "." )? ( event-ref ) ( S? ("+"|"-") S?Clock-value)?           描述一個事件和一個元素開始確定的可選擇性補償。動畫的開始被定義為關聯於事件啟動的事件。對一個給定的基於事件元素的有效的事件符號列          表是一個對 SVG DTD定義的給定的元素的有效的事件屬性列表。有一點不同是主要的"on"要從事件名稱上移除。（例如，動畫的事件名稱          是"click",而不是"onclick"）。所有SVG支援的事件列表可以在Complete list of supported events中發現。詳細的基於事件的計時在     repeat-value ::= ( Id-value "." )? "repeat(" integer ")" ( S? ("+"|"-") S?Clock-value)?          描述一個合格的重複次數。元素的起始被定義相關於帶有規定的迭代值的重複事件啟動時間。         accessKey-value ::= "accessKey(" character ")" ( S? ("+"|"-") S?Clock-value)?          描述了一個元素開始確定的accessKey。元素被定義關聯於accessKey字母被使用者輸入的時間。    wallclock-sync-value ::= "wallclock(" wallclock-value ")"          用一個現實世界時鐘值來描述元素的開始。壁鐘時間語法是是基於Representation of dates and times[ISO8601]定義的語法    "indefinite"         動畫的起始將會被一個 "beginElement()"方法呼叫或者一個連結到元素的超連結確定。動畫的DOM方法在DOM interfaces中描述。基於超連結的     除了在本規範中明確提出的SVG特殊規則，本屬性的標準定義在規範中。特別的可以參考 dur=Clock-value| "media" | "indefinite"      指定了簡單的時間間隔。屬性值是下面其中之一：     "media"          把簡單的時間間隔指定為固有的媒體間隔時間。僅對定義在媒體當中的元素有效。（對SVG來說，如果被指定為"media"，那麼應該忽略這個屬性）       "indefinite"          指定簡單的時間間隔為無限。       如果一個動畫元素沒有指定"dur"屬性，那麼動畫時間就是無限的。但是這樣設定的動畫插入是不會工作的（儘管這可能對"set"有用）。除了在本規範中明確提到的SVG特殊的規則，這個屬性的       為動畫約束活動時間設定的結束值。這個屬性值是一個用分號分隔的值列表。       end-value-list ::=end-value(S? ";" S? end-value-list )?             一個用分號分割的結束值列表。下面是是插入結束值列表的結束值詳細細節.             描述了運動的結束。        一個值為"indefinite"表示動畫的結束將會通過一個結束元素的方法呼叫來確定。除了在本規範中明確提到的SVG特殊規則，本屬性的標準定義在規範中。特別的， min=       指明活動週期的最小值。屬性值是下面兩者之一：Clock-value            指明活動週期最小值的長度，以本地時間為基準。值必須大於0.      "media"            指明活動週期的最小值作為媒體固有周期。它僅對媒體定義的元素有效。（對SVG動畫來說，如果被指定為媒體，這個屬性將會被忽略。）      "min"的預設值是"0"。這不會對活動週期產生一點約束。除了在本規範中定義的SVG特殊屬性，本屬性的標準定義在規範中。特別的，請參考：SMIL Animation: 'min' attribute
max=        指明活動週期的最大值。屬性值是下面兩者之一： Clock-value             指明活動週期的最大值作為媒體固有周期。它僅對媒體定義的元素有效。（對SVG動畫來說，如果被指定為媒體，這個屬性將會被忽略。）              "max"沒有預設值，也不會對活動週期產生約束。除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在規範中。特別的，請參考： restart="always" | "whenNotActive" | "never"always              動畫可以在任意時刻重新啟動，它是預設值。       whenNotActive              動畫只有在沒有其他動畫正在執行時才可以重啟。嘗試在動畫執行的時候重啟動畫將會被忽略。      never             元素不會為剩餘的當前動畫週期的父時間容器重啟動畫。（在SVG的情況下，因為父時間容器是SVG文件片段，那麼動畫不會為了剩餘的文件週期重啟）        除了本規範中明確提到的SVG特殊規範，本屬性的標準定義在規範中。特別的，請參考：     SMIL Animation: 'restart' attribute  
repeatCount=numeric value | "indefinite"    指明瞭動畫函式的迭代次數，它的取值範圍如下：    numeric value         這是一個十進位制的"floating point"數值，制定了迭代數值。它引入了部分迭代，可以解釋為浮點數的小數部分。一個小數值可以解析成為一個週期的一部分。值必須大於0.    "indefinite"         動畫被定義為無限的重複除了本規範中明確提到的SVG特殊規範，本屬性的標準定義在規範中。特別的，請參考：SMIL Animation: 'repeatCount' attribute
repeatDur=      指明瞭重複的整個週期長度。它的取值如下：          指明瞭動畫呈現時間中重複呼叫動畫函式的週期      "indefinite"           動畫被定義為無限重複（直到文件生命週期結束） fill="freeze" | "remove"      這個屬性取值如下：      freeze             這個動畫效果函式被定義用來凍結活動週期的最後的值的效果值。在剩餘的文件週期內動畫的效果是被凍結的。（除非動畫被重啟，參考：SMIL Animation: Restarting animation）             remove             當動畫的活動週期結束時，動畫的效果是被移除的。當動畫結束時，動畫再也不能影響目標元素（除非動畫被重啟，參考：SMIL Animation: Restarting animation）               這個值是預設值。 規範定義了關聯上面屬性的詳細處理過程。除了在本規範明確提出的特殊的SVG規範，SMIL動畫規範為上面的屬性的使用規則給出了標準定義。 9.時鐘值 在 規範中，時鐘值有相同的語法。時鐘值語法在這裡重複：

Clock-val         ::= Full-clock-val | Partial-clock-val 
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

對於計時數值，預設的字尾單位是"s"（對秒來說）。在時鐘值裡面不允許嵌入空格，儘管開始和結尾的空白字元會被忽略掉。時鐘值描述了presentation time。 下面是合法的時鐘值例子： 全格式時鐘值： 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 10.定義動畫值的實時屬性 下面的屬性是動畫值屬性。它們通用於‘animate’,‘animateColor’,‘animateTransform’。這些屬性定義的值被實時的分配到指定目標元素的屬性上。這些屬性在下面提供了控制相關事件的關鍵幀和離散值之間的插入方法。屬性定義： calcMode="discrete | linear | paced | spline"       指定了動畫的寫入模式。它可以取下面的值。預設的模式是"linear"，然而如果屬性不支援linear模式寫入，‘calcMode’屬性被忽略並且離散方式寫入會啟用。discrete                這表示動畫函式將會從一個值在沒有任何寫入的情況下跳到下一個值。       linear                值之間簡單的線性寫入被用作計算動畫函式。除了        paced               定義了貫穿整個動畫變化產生平穩步調的寫入方式 。這個方式僅被有適當的距離函式定義的資料型別支援， 它僅包含標量資料型別和在Paced animation and complex types中               列出的型別。如果"paced"被指定，所有的‘keyTimes’和               距離函式的型別上使用步調動畫，主要是因為在一些客戶端上的不可預知的後果。      spline               定義了從 ‘values’列表中的一個值通過一個用立體貝賽爾函式定義的時間函式到達下一個值。spline的點定義在‘keyTimes’屬性中，每個區間的控制點定義在               屬性中。     除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在中。特別的，請參考：SMIL Animation: 'calcMode' attribute
values="<list>"      一個用分號分隔的控制動畫步調的時間值列表。每次在列表中的值符合在‘values’屬性列表中值，並且定義了什麼時間這個值被使用到動畫函式中。每次在     個0-1之間的浮點數來指定，它會重繪一個均衡的補償到動畫元素的週期當中。對於一個被指定帶有如果被指定，那麼必須像在     的值一樣多。對from/to/by動畫，‘keyTimes’如果被指定，就必須有兩個值。每個連續的時間值必須比它前面的值大或者相等。            對linear和spline動畫，在列表中的第一個時間值必須是0，最後一個時間值必須是1.每一個關聯到每一個值的key time在這個值被設定的時候定義。值被寫入到key times之間。            對於離散動畫，在列表中的第一個時間值必須是0，最後一個時間值必須是1.每一個關聯到每一個值的key time在這個值被設定的時候定義。動畫函式會使用這個值直到下一個時間值。     如果寫入模式是"paced"，那麼本屬性將會被忽略。如果在‘keyTimes’中有任一錯誤，文件片段會發生錯誤。如果週期是無限的，所有的     由於對一些值的型別步調動畫模式不會指定，對這些型別使用者被推薦使用帶有計算過的"linear"動畫模式來取得特殊的寫入效果。除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在中。特別的，請參考：SMIL Animation: 'keyTimes' attributekeySplines="<list>"     一系列與"keyTimes"列表關聯的貝塞爾控制點，定義了一個控制區間步調的立體貝塞爾曲線函式。屬性值是一個分號分割的控制點列表描述。每一個控制點描述一組四個值： x1 y1 x2 y2,    描述了對一個時間片段的貝塞爾控制點。注意：SMIL允許值通過空白符或者逗號空白符分隔。"keyTimes"值定義了與與關聯片段的貝塞爾"anchor points",並且"keySplines"值是控制點。    因此"keySplines"的控制點必須比"keyTimes"的控制點最少多一個。值的取值範圍是[0,1]。這個值除非'spline'，否則這個屬性將會被忽略。如果在    中出現任一錯誤，文件會發生錯誤。 from="<value>"    指定了動畫的起始值。除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在中。特別的，請參考：SMIL Animation: 'from' attribute
to="<value>"    指定了動畫的結束值。除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在中。特別的，請參考：SMIL Animation: 'to' attribute by="<value>"    指定了動畫的相對偏移量。除了在本規範中明確提到的SVG特殊規範，本屬性的標準定義在中。特別的，請參考：SMIL Animation: 'by' attribute 規範與上面這些屬性相關的詳細處理規則。除了在本規範中明確提到的SVG特殊規範，SMIL動畫規範為上面的屬性定義了標準的處理規則。在動畫元素中指定的動畫值對給定的 屬性來說必須是合法的。在開始和結尾處的空白以及在分號前後的空白將會被忽略。為給定屬性指定的所有值必須是合法的，否則文件會產生錯誤。如果一個值的列表被使用了，那麼動畫將會依次 應用這些值到動畫程式中。如果一個值的列表被指定了，任一的 ‘from’,‘to’和‘by’屬性值將會被忽略。 為了是提供在帶有"from"屬性的離散動畫直觀連續的表達並那些潛在的值被使用到這裡，這些在SVG中的離散動畫偏離了在SMIL中的定義。正如一個離散動畫，一個離散動畫將在前半週期設定一個 值，並且"to"值到下半個週期。 下面的資料圖解了‘keySplines’設定對單個區間的影響。橫向的座標軸可以認為是在區間中單元過程寫入的輸入值，動畫的步調將會沿著給定的區間使用這些寫入值。縱向座標軸是單元程式的結果值，取決於‘keySplines’屬性定義的函式。另一種解釋是橫向座標軸是對區間的輸入單元事件，並且縱向座標是輸出單元事件。同樣可參考章節： 為了圖解計算資料，考察下面這個簡單的例子 <animate dur="4s" values="10; 20" keyTimes="0; 1"  calcMode="spline" keySplines={as in table} /> 對上面每個例子使用

Value of‘keySplines’	Initial value	After 1s	After 2s	After 3s	Final value
0 0 1 1	10.0	12.5	15.0	17.5	20.0
.5 0 .5 1	10.0	11.0	15.0	19.0	20.0
0 .75 .25 1	10.0	18.0	19.3	19.8	20.0
1 0 .25 .25	10.0	10.1	10.6	16.9	20.0

對一個貝塞爾spline計算的正式定義，參考：[FOLEY-VANDAM], pp. 488-491. 11.控制動畫聯合的屬性 對一個動畫的屬性值把動畫定義為一個相對值比定義為一個絕對值更加的常用。一個簡單的 "grow"動畫可以以10畫素增加為一個物件的寬度。 <rect width="20px" ...>   <animate attributeName="width" from="0px" to="10px" dur="10s"            additive="sum"/> </rect> 對重複的動畫建立在前一個動畫結果的基礎上是非常有用的，累加這種影響。下面的例子顯示了了矩形在每一次動畫重複的時候不斷地增長： <rect width="20px" ...>   <animate attributeName="width" from="0px" to="10px" dur="10s"            additive="sum" accumulate="sum" repeatCount="5"/> </rect> 在第一次重複的時候，矩形的寬度是30畫素。在第二次重複結束的時候，矩形的寬度是40畫素。在第五次重複結束的時候，矩形的寬度是70畫素。 屬性定義： additive="replace | sum"         控制的動畫是否可以追加到前面的動畫上。促成多個動畫的聯合執行。sum              指明瞭動畫將追加到屬性的根本值和前面的低許可權動畫上。        replace             指明瞭動畫將覆蓋屬性的根本值和前面的低許可權動畫 。這是預設值，但是表達效果也受動畫值屬性"by"和"to"影響，就如在  accumulate="none | sum"       控制了動畫結果是否可以累計         sum              指明瞭在第一次迭代後每一次迭代都是 建立在前一次迭代的結果值紙上。       none              指明瞭重複迭代是不累計的，它是預設值。      這個屬性會在目標屬性值不支援或者動畫元素不重複的情況下被忽略。累積的動畫不是為"to animation"設定的。當動畫設定帶有‘to’的時候，本屬性將會被忽略。    12.繼承 SVG允許屬性和元素可以被動畫。如果一個給定的屬性被子孫繼承，那麼在父元素（例如一個"g"元素）上的動畫將會傳播屬性動畫值到子孫元素作為動畫增益的作用；因此子孫元素可以繼承從祖先上繼承可動畫的屬性和值。 13."animate"元素 ‘animate’元素被用作實時動畫單一的屬性。例如，讓一個矩形在5秒內淡出，你可以指示： 14."set"元素 ‘set’元素表達了一個簡單的含義是對一個指定的週期僅僅設定一個屬性的值。它支援所有的屬性型別，包括那些不能合理寫入的字串和布林值等等。‘set’元素是不可以追加動畫的。追加和累計對‘set’元素是不允許的，即便是設定了也會被忽略。 屬性定義 to= "<value>" 15."animateMotion"元素 屬性定義： calcMode="discrete | linear | paced | spline"                 指明瞭動畫的寫入方式。引用了前面的‘calcMode’屬性的描述。唯一的不同點是預設值是"paced"。參考：SMIL Animation: 'calcMode' attribute for 'animateMotion' path= "<path-data>"                 運動路徑， 在相同的格式化和解釋下被解讀為"path"元素的"d"屬性。一個動畫的動畫路徑的效果是為引用元素在CTM中新增一個必要的移動矩陣，這會通過實時計算X,Y的值                 使引用元素沿著當前使用者座標系的X,Y軸移動。 keyPoints= "<list-of-numbers>"                接收一個由0到1之間用分號分隔的浮點值列表並且它與表明了元素在‘keyTimes’值指定的時刻應當沿著動畫路徑移動多長的距離。距離計算使用使用者代理的               對應。如果這個屬性有錯誤，那麼文件會出錯。 rotate= "<number>| auto | auto-reverse"                ‘rotate’屬性在初始當前使用者座標系統通過對當前元素的CTM右乘一個矩陣來產生一個角度的變化。角度變化移動在必要的移動基於‘path’屬性被計算後才被應用。 auto                        表明了元素實時的自動通過與動畫路徑方向一個角度旋轉。              auto-reverse                        表明了元素實時的自動沿著動畫路徑反向旋轉。                         表明了目標元素有一個常量的角度旋轉應用到它，這個角度用數字指示度數。預設值是"0". origin= "default" 屬性定義： xlink:href= "<iri>" 對‘from’,‘by’,‘to’和 指定的值，含有多個x，y座標值對，x座標與y座標用空白符或者單個逗號分隔。例如：from="33,15" 表示了x座標值是33，y座標值是15。如果"values"被提供了，那麼‘values’屬性必須含有一個x,y座標值對列表。座標值最少用一個空白字元或者一個逗號進行分隔。在 分隔符兩側額外的空白符是可以允許的。例如： values="10,20;30,20;30,40"或者 values="10mm,20mm;30mm,20mm;30mm,40mm"。每一個座標都表示一個長度。 屬性‘from’,‘by’,‘to’和‘values’在呈現動畫路徑的當前canvas上指定一個圖形。 兩種可靠的可選的允許定義使用任意SVG的path data指令定義一個動畫路徑方法： ‘mpath’子元素提供了引用一個外用的‘path’元素作為一個動畫路徑定義的能力。 注意在使用者空間中，SVG的path data指令只能包含值，然而‘from’,‘by’,‘to’和‘values’能夠在使用者空間指明座標值或者使用單位識別符號。參考：Units 圖形的各種各樣的(x,y)點為引用元素提供一個移動矩陣到CTM上，引用元素通過實時的計算圖形上的(x,y)值在當前座標系統上沿著x,y軸移動。因此，引用元素通過 關聯與原始當前使用者座標系統的動畫路徑偏移量實時的移動。追加的移動被應用到由目標元素的‘transform’屬性導致的任意移動或者由目標元素的 ）是"paced"。它將沿著指定路徑產生勻速的動畫。注意此刻animateMotion元素可以追加，觀察兩個或者多個 "paced" (勻速)動畫可能在一個聯合的勻速動畫可能沒有結果是非常重要的。當一個path混雜有"discrete", "linear" 或者"spline"的  ‘keyPoints’沒有提供值，值的數量被定義為path定義的點數量，除非path之中有多個"move to"指令。在路徑當中一個"move to"指令當作為一個分隔點劃分週期或者與 被認為是0長度並且在計算步調時不會被考慮。為了控制沿著動作路徑勻速運動的更大的靈活性， 重寫了‘from’, ‘by’ 和 ‘to’。在一個動作路徑動畫的期間dur內的任意時刻t，沿著動作路徑計算 出的點通過尋找沿著動作路徑使用使用者代理的distance along the path演算法的t/dur 距離的點來確定。下面的例子展示了在動作路徑動畫中被計算出的移動矩陣。 示例：

<?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" >
  <desc>Example animMotion01 - demonstrate motion animation computations</desc>
  <rect x="1" y="1" width="498" height="298"
        fill="none" stroke="blue" stroke-width="2" />
  <!-- Draw the outline of the motion path in blue, along
          with three small circles at the start, middle and end. -->
  <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"  />
  <!-- Here is a triangle which will be moved about the motion path.
       It is defined with an upright orientation with the base of
       the triangle centered horizontally just above the origin. -->
  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
       <mpath xlink:href="#path1"/>
    </animateMotion>
  </path>
</svg>

效果影象： 下面的表格展示了為取得這樣動作路徑動畫被應用的移動矩陣：

After 0s	After 3s	After 6s
Supplemental transform due to movement along motion path	translate(100,250)	translate(250,100)	translate(400,250)
Supplemental transform due to rotate="auto"	rotate(-90)	rotate(0)	rotate(90)

16."animateColor"元素 這個元素使用已經被廢棄了，因為可以使用 17."animateTransform"元素 ‘animateTransform’元素向目標元素上動畫了一個移動屬性，由此允許動態的控制平移，縮放，旋轉，斜交。 屬性定義： type= "translate | scale | rotate | skewX | skewY"                指明瞭移動的型別並且根據這個型別的值實時的變動。如果這個屬性沒有指定，那麼預設的效果是和'translate'一樣的。               ‘from’,‘by’和‘to’ 屬性賦值對給定的移動型別用相同的語法表達是可以的：              對type="translate"的，每一個屬性賦值的可以用<tx>或者<tx>,<ty>              對type="scale"的，每一個屬性值賦值可以用<sx>或者<sx>,<sy>               對type="rotate"的,每一個屬性值賦值可以用<rotate-angle>或者<rotate-angle> <cx> <cy>              對type="skewX"和type="skewY"的，每一個屬性值賦值可以用<skew-angle>              ‘values’屬性包含了一個用分號分隔的值列表，在列表中每一個單獨的值就像上面 ‘from’,‘by’和‘to’ 描述的格式一致。 SVG除使用本身的動畫元素操作動畫外，還可以使用javascript操作DOM方式的方法來進行動畫。
            指明活動週期最大值的長度，以本地時間為基準。值必須大於0.      "media"