使用腳本可以很方便的完成各種復雜的任務，也是完成動畫和交互的一種主流方式。由於SVG是html的元素，所以支持普通的DOM操作，又由於SVG本質上是xml文檔，所以也有一種特殊的DOM操作，大多稱之為SVG DOM。當然了，由於目前IE不支持SVG，開發基於IE的SVG頁面需要采用不同的方式。這部分的知識大家其實都很熟悉，下面只是簡單的看一下。
HTML頁面中的DOM操作
DOM大家應該很熟悉了，這里先看一個小例子：
< style >
#svgContainer {
width : 400px ;
height : 400px ;
background-color : #a0a0a0 ;
}
</ style >
< script >
function CreateSVG () {
var xmlns = " http://www.w3.org/2000/svg " ;
var boxWidth = 300 ;
var boxHeight = 300 ;
var svgElem = document.createElementNS (xmlns, " svg " );
svgElem.setAttributeNS ( null , " viewBox " , " 0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS ( null , " width " , boxWidth);
svgElem.setAttributeNS ( null , " height " , boxHeight);
svgElem.style.display = " block " ;
var g = document.createElementNS (xmlns, " g " );
svgElem.appendChild (g);
g.setAttributeNS ( null , ' transform ' , ' matrix(1,0,0,-1,0,300) ' );
// draw linear gradient
var defs = document.createElementNS (xmlns, " defs " );
var grad = document.createElementNS (xmlns, " linearGradient " );
grad.setAttributeNS ( null , " id " , " gradient " );
grad.setAttributeNS ( null , " x1 " , " 0% " );
grad.setAttributeNS ( null , " x2 " , " 0% " );
grad.setAttributeNS ( null , " y1 " , " 100% " );
grad.setAttributeNS ( null , " y2 " , " 0% " );
var stopTop = document.createElementNS (xmlns, " stop " );
stopTop.setAttributeNS ( null , " offset " , " 0% " );
stopTop.setAttributeNS ( null , " stop-color " , " #ff0000 " );
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, " stop " );
stopBottom.setAttributeNS ( null , " offset " , " 100% " );
stopBottom.setAttributeNS ( null , " stop-color " , " #0000ff " );
grad.appendChild (stopBottom);
defs.appendChild (grad);
g.appendChild (defs);
// draw borders
var coords = " M 0, 0 " ;
coords += " l 0, 300 " ;
coords += " l 300, 0 " ;
coords += " l 0, -300 " ;
coords += " l -300, 0 " ;
var path = document.createElementNS (xmlns, " path " );
path.setAttributeNS ( null , ' stroke ' , " #000000 " );
path.setAttributeNS ( null , ' stroke-width ' , 10 );
path.setAttributeNS ( null , ' stroke-linejoin ' , " round " );
path.setAttributeNS ( null , ' d ' , coords);
path.setAttributeNS ( null , ' fill ' , " url(#gradient) " );
path.setAttributeNS ( null , ' opacity ' , 1.0 );
g.appendChild (path);
var svgContainer = document.getElementById ( " svgContainer " );
svgContainer.appendChild (svgElem);
}
</ script >
</ head >
< body onload ="CreateSVG ()" >
< div id ="svgContainer" ></ div >
</ body >
發現了沒，與普通的html元素的DOM操作完全一樣:
選擇元素：document.getElementById
創建元素：document.createElementNS
創建子元素的另外一種方式：element.createChildNS
添加元素：node.appendChild
設置元素的屬性：element.setAttributeNS/element.setAttribute
除了上面這幾個操作，下面的操作和屬性也很常見：
獲取元素的屬性值： element.getAttributeNS/element.getAttribute
檢查元素是否存在某屬性：element.hasAttributeNS
移除元素的某屬性：element.removeAttributeNS
父元素、子元素和兄弟節點：element.parentNode/element.firstChild/child.nextSibling
這些方法這里不再詳細介紹了；此外，DOM樹的節點結構，對象之間的繼承關系也都是差不多的，就不詳述了。需要的同學參看后面的DOM Core Object的文檔。
不過，需要注意的是SVG本質上是XML文檔，所以基本采用的DOM方法都是帶NS結尾的方式，來提供相關的namespace；如果創建元素時已經提供了namespace，而且沒有多個namespace的問題，那么設置相關屬性的時候，也可以選擇使用不帶NS的版本，比如直接使用element.setAttribute設置屬性值，但是總的來說，還是強烈推薦使用帶NS結尾的版本，因為這個版本總是工作正常的，即使是在多namespace的情況下。
SVG DOM
這個與標准的DOM有哪些不同，我也沒找到什么全面的資料，目前只知道對屬性的賦值方式是不同的。如果有了解這方面的同學還請吱一聲啊。
上面的例子中，我們使用element.setAttributeNS/element.setAttribute來給屬性賦值，在SVG DOM中，可以使用面向對象的方式，通過訪問點號來給對象的屬性賦值，比如下面是兩種方式的對比：
普通的DOM方式：
element.setAttribute("y", "20");
element.setAttribute("width", "100%");
element.setAttribute("height", "2em");
而SVG DOM的方式：
element.y.baseVal.value = 20;
element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);
DOM腳本屬於傳統的腳本，其特征是通過構建“值字符串”來設置各個項。SVG DOM腳本樣式的優點是，你不必構建“值字符串”，所以性能優於DOM腳本。
嵌入SVG的腳本
如果要在SVG內部添加腳本，就需要使用script元素，這個前面已經講過了，除了這一點，基本上與把腳本放到外面的HTML中是一樣的。看一個例子：
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
</ head >
< body >
< svg xmlns ="http://www.w3.org/2000/svg" xmlns:xlink ="http://www.w3.org/1999/xlink" width ="300" height ="300" >
< script type ="text/ecmascript" >
<! [CDATA[
function showRectColor() {
alert(document.getElementById( " myBlueRect " ).getAttributeNS( null , " fill " ));
}
function showRectArea(evt) {
var width = parseFloat(evt.target.getAttributeNS( null , " width " ));
var height = parseFloat(evt.target.getAttributeNS( null , " height " ));
alert( " The rectangle area is: " + (width * height));
}
function showRootChildrenNr() {
alert( " Nr of Children: " + document.documentElement.childNodes.length);
}
]] >
</ script >
< g id ="firstGroup" >
< rect id ="myBlueRect" width ="100" height ="50" x ="40" y ="20" fill ="blue" onclick ="showRectArea(evt)" />
< text x ="40" y ="100" onclick ="showRectColor()" >Click on this text to show rectangle color. </ text >
< text x ="40" y ="130" >Click on rectangle to show rectangle area. </ text >
< text x ="40" y ="160" onclick ="showRootChildrenNr()" >Click on this text to show the number of child
< tspan x ="40" dy ="20" >elements of the root element. </ tspan ></ text >
</ g >
</ svg >
</ body >
</ html >
在這個例子中，列舉了常見的獲取DOM對象的方式：
1. 通過document.getElementById或者document.getElementByClassName之類的方法獲取對象；
2. 通過document.documentElement或者document.rootElement獲取document對象；
3. 通過事件參數evt.target獲取產生事件的對象。這種方式的優點就是不使用id就可以獲取到產生事件的對象。
其余的腳本基本和普通的DOM是一樣的。
實用參考：
腳本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/SVG
熱門參考：http://www.chinasvg.com/
官方文檔：http://www.w3.org/TR/SVG11/
DOM Core Object API：http://reference.sitepoint.com/javascript/Document
SVG DOM常用屬性和方法:http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459