国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

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

2020-03-24 19:20:44
字體:
來源:轉載
供稿:網友
使用腳本可以很方便的完成各種復雜的任務,也是完成動畫和交互的一種主流方式。由于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
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("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腳本屬于傳統的腳本,其特征是通過構建 值字符串 來設置各個項。SVG DOM腳本樣式的優點是,你不必構建 值字符串 ,所以性能優于DOM腳本。

嵌入SVG的腳本
如果要在SVG內部添加腳本,就需要使用script元素,這個前面已經講過了,除了這一點,基本上與把腳本放到外面的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" /
text x="40" y="100" 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" 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/393459html教程

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 大同县| 恩施市| 锦屏县| 泰兴市| 阿瓦提县| 高安市| 都昌县| 丹东市| 子洲县| 成都市| 黄大仙区| 永嘉县| 仁怀市| 汶川县| 桃园县| 醴陵市| 乌恰县| 五大连池市| 财经| 西和县| 长武县| 南皮县| 芒康县| 图片| 木兰县| 宜城市| 治县。| 大石桥市| 瑞安市| 建湖县| 太仓市| 台安县| 东丽区| 湟源县| 七台河市| 泽库县| 娄底市| 高邮市| 十堰市| 广灵县| 嵊泗县|