溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
HTML5中SVG DOM及DOM操作是怎樣的，針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
使用腳本可以很方便的完成各種復(fù)雜的任務(wù)，也是完成動畫和交互的一種主流方式。由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本質(zhì)上是xml文檔，所以也有一種特殊的DOM操作，大多稱之為SVG DOM。當(dāng)然了，由于目前IE不支持SVG，開發(fā)基于IE的SVG頁面需要采用不同的方式。這部分的知識大家其實(shí)都很熟悉，下面只是簡單的看一下。
HTML頁面中的DOM操作
DOM大家應(yīng)該很熟悉了，這里先看一個小例子：
代碼如下:
<head>
<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>
發(fā)現(xiàn)了沒，與普通的html元素的DOM操作完全一樣:
選擇元素：document.getElementById
創(chuàng)建元素：document.createElementNS
創(chuàng)建子元素的另外一種方式：element.createChildNS
添加元素：node.appendChild
設(shè)置元素的屬性：element.setAttributeNS/element.setAttribute
除了上面這幾個操作，下面的操作和屬性也很常見：
獲取元素的屬性值： element.getAttributeNS/element.getAttribute
檢查元素是否存在某屬性：element.hasAttributeNS
移除元素的某屬性：element.removeAttributeNS
父元素、子元素和兄弟節(jié)點(diǎn)：element.parentNode/element.firstChild/child.nextSibling
這些方法這里不再詳細(xì)介紹了；此外，DOM樹的節(jié)點(diǎn)結(jié)構(gòu)，對象之間的繼承關(guān)系也都是差不多的，就不詳述了。需要的同學(xué)參看后面的DOM Core Object的文檔。
不過，需要注意的是SVG本質(zhì)上是XML文檔，所以基本采用的DOM方法都是帶NS結(jié)尾的方式，來提供相關(guān)的namespace；如果創(chuàng)建元素時已經(jīng)提供了namespace，而且沒有多個namespace的問題，那么設(shè)置相關(guān)屬性的時候，也可以選擇使用不帶NS的版本，比如直接使用element.setAttribute設(shè)置屬性值，但是總的來說，還是強(qiáng)烈推薦使用帶NS結(jié)尾的版本，因?yàn)檫@個版本總是工作正常的，即使是在多namespace的情況下。
SVG DOM
這個與標(biāo)準(zhǔn)的DOM有哪些不同，我也沒找到什么全面的資料，目前只知道對屬性的賦值方式是不同的。如果有了解這方面的同學(xué)還請吱一聲啊。
上面的例子中，我們使用element.setAttributeNS/element.setAttribute來給屬性賦值，在SVG DOM中，可以使用面向?qū)ο蟮姆绞?，通過訪問點(diǎn)號來給對象的屬性賦值，比如下面是兩種方式的對比：
普通的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;
element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);
DOM腳本屬于傳統(tǒng)的腳本，其特征是通過構(gòu)建“值字符串”來設(shè)置各個項(xiàng)。SVG DOM腳本樣式的優(yōu)點(diǎn)是，你不必構(gòu)建“值字符串”，所以性能優(yōu)于DOM腳本。
嵌入SVG的腳本
如果要在SVG內(nèi)部添加腳本，就需要使用script元素，這個前面已經(jīng)講過了，除了這一點(diǎn)，基本上與把腳本放到外面的HTML中是一樣的。看一個例子：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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. 通過事件參數(shù)evt.target獲取產(chǎn)生事件的對象。這種方式的優(yōu)點(diǎn)就是不使用id就可以獲取到產(chǎn)生事件的對象。
其余的腳本基本和普通的DOM是一樣的。
關(guān)于HTML5中SVG DOM及DOM操作是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
