動畫技術是網際網路
中不可缺少的乙個重要組成部分，是吸引訪問者的重要手段之一，svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有：
1）利用svg提供的動畫元素實現：由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各種動畫效果，比如：沿某路徑運動、漸隱漸現、旋轉、縮放、改變顏色等。
2）使用svg dom：由於svg dom遵循dom1、dom2規範的大部分內容，因此，svg中的每個屬性和樣式都可以通過指令碼程式設計來訪問；另外，svg也提供了一套擴充套件的dom介面，讓通過指令碼程式設計實現動畫效果的手段更方便快捷。指令碼語言中的定時器可以很好地觸發和控制圖象的運動。
svg的動畫元素標準的指定者與symm（synchronized **********）工作組合作，共同編寫了smil動畫規範，這個規範描繪了xml文件結構中使用的通用的動畫特徵集。svg不但實現了smil的動畫規範，同時也提供了一些svg的特殊擴充套件。svg定義了比smil動畫更為嚴格的錯誤處理程式，當文件中有任何錯誤產生時，動畫都將會停止。
svg支援smil（synchronized ********** integration language）動畫規範中定義的下面的動畫元素：
animate：改變svg元素數值屬性的不同值
set：是animate的簡化，主要用來改變非數值屬性的屬性值，比如visibility屬性等
animatemotion：沿某運動路線移動svg元素
animatecolor：改變某些元素的顏色屬性值
svg對smil動畫的擴充套件元素和屬性有：
animatetransform：改變svg轉換的轉換屬性值
path屬性：改變animatemotion元素中path屬性的所有特性。
mpath元素：svg允許animatemotion元素包含mpath子元素，它能夠引用svg中path元素的路徑定義
rotate屬性：svg為animatemotion增加乙個rotate屬性，用來控制乙個物件是否自動進行旋轉。
下面通過乙個簡單的例子，來看一看svg是如何實現動畫效果的：
<?xml version="1.0" encoding="utf-16" standalone="no"?>
">
上面例子中，我們可以看到，乙個帶漸變顏色填充的圓，位置逐漸向右下方移動，圓心位置從(50,150)移動到（250,152），同時，半徑也由50增大到150；文字「hello,world!」在4秒時開始出現（可視性visibility由hidden變成了visible）,並開始向圓中心方向移動，顏色從#0000ff逐漸變成了#800000，文字方向由-90度逐漸變成0度，文字大小逐漸變化到原來的3倍；文字的變化共持續了6秒。
下面解釋**中與動畫元素和屬性：
animate:是動畫元素，定義要進行變化的各種屬性。
xlink:href：指定要進行動畫的元素名稱，是乙個uri位址。要進行動畫的元素必須是當前svg文件中出現的元素，uri必須指定乙個具有動畫能力的元素，如果指定的元素不止乙個，或者指定的元素沒有進行動畫的能力，則會產生錯誤；如果沒有uri屬性的話，要進行動畫的元素就是當前動畫元素的最接近的父元素。
attributename：指定要進行動畫變化的屬性名稱，可根據實際情況帶上xml的命名空間。
attributetype：指定要變化的屬性和屬性值在什麼命名空間裡定義。可有三種選擇之一：css、xml、auto。「css」指定attributename的值是css屬性的名字；「xml」指定attributename的值是預設xml命名空間裡定義的xml屬性名；「auto」是預設值，首先搜尋css屬性列表看能否匹配attributename，如果不能找到匹配的值，則尋找該元素的預設xml命名空間。
begin：指定元素何時進行動畫。可以取的值有： offset-value、syncbase-value、event-value、repeat-value、accesskey-value、wallclock-sync-value、"indefinite" ，offset-value是相對於文件開始的時間，不能為負值；syncbase-value是相對於另外動畫元素的同步時間，必須包含另外元素的id值；event-value是由事件觸發；repeat-value是重複事件，元素動畫開始時間是相對於重複事件觸發的時間；accesskey-value是指相對於使用者的鍵盤輸入的時間；
wallclock-sync-value是現實世界中的時間；indefinite是由beginelement()的呼叫或被鏈結到該元素決定是否開始動畫。該屬性如果同時選擇多個值的話，要以分號「;」隔開。
dur：指定動畫的持續時間。可以取下面三者之一：大於0的數值、media和indefinite。該屬性值預設為indefinite，即無限長。
end：指定動畫結束的時間。與begin的取值方法類似。
fill：指動畫後的填充狀態。取下面二者之一：remove和freeze。remove表示不保留動畫結束時的狀態；freeze表示保留動畫結束時的狀態。預設為remove。
from：指定動畫開始時的屬性值。
to：指定動畫結束時的屬性值。
additive：指定動畫是否是在原來的基礎上進行的。取sum和replace二者之一，預設為replace。
accumulate：指定動畫是否是在前一次動畫的基礎上進行累加的。取sum和none二者之一，預設為none。
關於additive和accumulate兩個屬性的意義，我們可以通過改變下面例子中的不同值來領會。
<?xml version="1.0" standalone="no"?>
另外，還有min（動畫持續的最小時間）、max（動畫持續的最大時間）、restart（動畫重新開始的時間，取always、whennotactive和never之一）、repeatcount（動畫重複的時間）和repeatdur（所有重複的持續時間）。時間的格式可以是02:10:13、20:10:10.25、10.5s、00:00.005、12.467、5ms、3.2h等，但裡面不能包含空格，頭尾有空格時將被忽略。
下面再看乙個沿指定路徑運動的例子：
<?xml version="1.0" encoding="utf-8" standalone="no"?>
">
上面的例子應用了animatemotion動畫元素，其屬性設定和前面類似。
svg dom產生動畫的方式是由指令碼語言呼叫dom物件的屬性和方法實現的，在svg中使用指令碼語言和html中類似，首先是指定指令碼的語言型別：有兩種辦法可以指定指令碼的語言型別
1），在svg元素裡使用contentscripttype屬性，可以指定整個文件裡使用的預設指令碼語言型別。
語法如下：
上面的例子中，首先找到要進行動畫的元素的容器元素，即g；然後每隔50px高產生乙個50*50的正方形，並把他們新增到g的節點中，最後每隔80毫秒,動態改變其位置和透明度，就可以看到動態的效果了！
SVG中的動畫技術 1
svg中的動畫技術 1 動畫技術是網際網路中不可缺少的乙個重要組成部分，是吸引訪問者的重要手段之一，svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各...
SVG中的動畫技術 1
svg中的動畫技術 1 動畫技術是網際網路中不可缺少的乙個重要組成部分，是吸引訪問者的重要手段之一，svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各...
SVG中的動畫技術 1
svg中的動畫技術 1 動畫技術是網際網路中不可缺少的乙個重要組成部分，是吸引訪問者的重要手段之一，svg也同樣有能力隨時改變向量圖象外在表現的能力。svg中生成動畫的方式有 1 利用svg提供的動畫元素實現 由於svg的內容可以定義成動態變化的，因此，利用svg提供的各種動畫元素，我們就可以得到各...