亚洲欧美文学,亚洲高清久久,一本色道久久综合

HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹

來源：易賢網閱讀：1695 次日期：2016-07-22 14:55:17

溫馨提示：易賢網小編為您整理了“HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹”,方便廣大網友查閱！

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

HTML頁面中的DOM操作

DOM大家應該很熟悉了，這里先看一個小例子：

代碼如下:

<head>

<style>

#svgContainer {

width: 400px;

height: 400px;

background-color: #a0a0a0;

}

</style>

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>

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