HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹_html5教學技巧-H5教程-PHP中文網

使用腳本可以很方便的完成各種複雜的任務，也是完成動畫和互動的一種主流方式。由於SVG是html的元素，所以支援普通的DOM操作，又由於SVG本質上是xml文檔，所以也有一種特殊的DOM操作，大多稱為SVG DOM。當然了，由於目前IE不支援SVG，開發基於IE的SVG頁面需要不同的方式。這部分的知識大家其實都很熟悉，下面只是簡單的看一下。

HTML頁中的DOM操作
DOM大家應該很熟悉了，這裡先看一個小例子：

複製程式碼

程式碼如下:

發現了沒，與普通的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("x", "10");
element.setAttribute("y", "20");
element.setAttribute("width", "100%");

element.setAttribute("height", "2em");

而SVG DOM的方式：

程式碼如下:

element.x.baseVal.value = 10;
element.y.baseVal.value = 20;
el.width>el.width. .baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100); element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);

嵌入SVG的腳本

如果要在SVG內部添加腳本，就需要使用script元素，這個前面已經講過了，除了這一點，基本上與把腳本放到外面的HTML中是一樣的。看一個例子：

複製程式碼程式碼如下:

頭>

}
function showRectArea(evt) {
var width = parseFloat(evt.target.getAttributeNS(null,"width"));
var height = parsetarFloat(evk. "));
alert("矩形面積為：" (寬* 高));
}
function showRootChildrenNr() {
alert("子節點數量：" document.documentElement.childNodes .length);
}
]]>
腳本>

按一下此文字可顯示矩形顏色。
點選長方形顯示矩形區域。
點擊此文字可顯示孩子的數量
根元素的元素。

身體>

在這個範例中，列舉了常見的取得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 核心物件API：http://reference.sitepoint.com/javascript/Document
SVG DOM常用屬性與方法：http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459