HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹_html5教學技巧

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

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

複製程式碼

程式碼如下:

<script> <br />function CreateSVG () { <br />var xmlns = "http:/xmlns = "http:/ /www.w3.org/2000/svg"; <br />var boxWidth = 300; <br />var boxHeight = 300; <br />var svgElem = document.createElementNS (xmlns, "svg") <emem. setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight); <br />svgElem.setAttributeNS (null, "width", boxWidth); <br />svgElem.setAttributeNS. <br />svgElem.style.display = "block"; <br />var g = document.createElementNS (xmlns, "g"); <br />svgElem.appendChild (g); <br />g.setAttributeNS (null, ' transform', 'matrix(1,0,0,-1,0,300)'); <br />// draw linear gradient <br />var defs = document.createElementNS (xmlns, "defs"); <br />var grad = document.createElementNS (xmlns, "linearGradient"); <br />grad.setAttributeNS (null, "id", "gradient"); <br />grad.setAttributeNS (null, "x1", "0%"); <br />grad.setAttributeNS (null, "x2", "0%"); <br />grad.setAttributeNS (null, "y1", "100%"); <br />grad.setAttributeNS (null, "y2" "0%"); <br />var stopTop = document.createElementNS (xmlns, "stop"); <br />stopTop.setAttributeNS (null, "offset", "0%"); <br />stopTop.setAttributeNS.setAttribute（nullull , "stop-color", "#ff0000"); <br />grad.appendChild (stopTop); <br />var stopBottom = document.createElementNS (xmlns, "stop"); <br />stopBottom.setAttributeNS (nullull, " offset", "100%"); <br />stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); <br />grad.appendChild (stopBottom); <br />defs.appendld (grad); <br />g.appendChild (defs); <br />// draw borders <br />var coords = "M 0, 0"; <br />coords = " l 0, 300"; <br />coords = " l 300 , 0"; <br />coords = " l 0, -300"; <br />coords = " l -300, 0"; <br />var path = document.createElementNS (xmlns, "path"); <br /> path.setAttributeNS (null, 'stroke', "#000000"); <br />path.setAttributeNS (null, 'stroke-width', 10); <br />path.setAttributeNS (null, 'stroke-linejoin', " round"); <br />path.setAttributeNS (null, 'd', coords); <br />path.setAttributeNS (null, 'fill', "url(#gradient)"); <br />path.setAttributeNS (nullull , 'opacity', 1.0); <br />g.appendChild (path); <br />var svgContainer = document.getElementById ("svgContainer"); <br />svgContainer.appendld (svgElem); </script>

發現了沒，與普通的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