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://www.w3.org/2000/svg"; <br />var boxWidth = 300; <br />var boxHeight = 300; <br />var svgElem = document.createElementNS (xmlns, "svg"); <br />svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); <br />svgElem.setAttributeNS (null, "width", boxWidth); <br />svgElem.setAttributeNS (null, "height", boxHeight); <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 (null, "stop-color", "#ff0000"); <br />grad.appendChild (stopTop); <br />var stopBottom = document.createElementNS (xmlns, "stop"); <br />stopBottom.setAttributeNS (null, "offset", "100%"); <br />stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); <br />grad.appendChild (stopBottom); <br />defs.appendChild (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 (null, 'opacity', 1.0); <br />g.appendChild (path); <br />var svgContainer = document.getElementById ("svgContainer"); <br />svgContainer.appendChild (svgElem); <br />} <br /></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;
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中是一样的。看一个例子：

复制代码

代码如下:

Click on this text to show rectangle color.
Click on rectangle to show rectangle area.
Click on this text to show the number of child
elements of the root element.

在这个例子中，列举了常见的获取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/393459