HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

更新时间:2023-04-03 06:08:50 阅读：评论：0

使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于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.tattributens (null, “viewbox”, “0 0 ” + bo水浒传读后感2000字xwidth + ” ” + boxheight);

svgelem.tattributens (null, “width”, boxwidth);

svgelem.tattributens (null, “height”, boxheight);

past的用法svgelem.style.display = “block”;

var g = document.createelementns (xmlns, “g”);

svgelem.appendchild (g);

g.tattributens (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.tattributens (null, “id”, “gradient”);

grad.tattributens (null, “x1”, “0%”);

grad.tattributens (null, “x2”, “0%”);

grad.tattributens (null, “y1”, “100%”);

grad.tattributens (null, “y2”, “0%”);

var stoptop = document.createelementns (xmlns, “stop”);

stoptop.tattributens (null, “offt”, “0%”);

stoptop.tattributens (null, “stop-color”, “#ff0000”);

grad.appendchild (stoptop);

var stopbottom = document.createelementns (xmlns, “stop”);

stopbottom.tattributens (null, “offt”, “100%”);

stopbottom.tattributens (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.tattributens (null, ‘stroke’, “#000000”);

path.tattributens (null, ‘stroke-width’, 10);

path.tattributens (null, ‘stroke-linejoin’, “round”);

path.tattributens (null, ‘d’, coords);

path.tattributens (null, ‘fill’, “url(#gradient)”);

path.tattributens (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.tattributens/element.tattribute

除了上面这几个操作，下面的操作和属性也很常见：

获取元素的属性值： 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.tattribute设置属性值，但是总的来说，还是强烈推荐使用带ns结尾的版本，因为这个版本总是工作正常的，即使是在多namespace的情况下。

svg dom
这个与标准的dom有哪些不同，我也没找到什么全面的资料，目前只知道对属性的赋值方式是不同的。如果有了解这方面的同学还请吱一声啊。

上面的例子中，我们使用element.tattributens/element.tattribute来给属性赋值，在svg dom中，可以使用面向对象的方式，通过访问点号来给对象的属性赋值，比如下面是两种方式的对比：

普通的dom方式：

复制代码代码如下:

element.tattribute(“x”, “10”);

element.tattribute(“y”, “20”);

element.tattribute(“width”, “100%”);

element.tattribute(“height”, “2em”);

而svg dom的方式：

复制代码代码如下:

element.x.baval.value = 10;

element.y.baval.value = 20;

element.width.baval.newvaluespecifiedunits(svglength.svg_lengthtype_percentage, 100);

element.height.baval.newvaluespecifiedunits(svglength.svg_lengthtype_ems, 10);

dom脚本属于传统的脚本，其特征是通过构建“值字符串”来设置各个项。svg dom脚本样式的优点是，你不必构建“值字符串”，所以性能优于dom脚本。

嵌入svg的脚本

如果要在svg内部添加脚本，就需要使用script元素，这个前面已经讲过了，除了这一点，基本上与把脚本放到外面的html中是一样的。看一个例子：

复制代码代码如下:

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/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 = parfloat(evt.target.getattributens(null,”width”));

var height = parfloat(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″ oncl工学门类ick=”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. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。

其余的脚本基本和普通的dom是一样的。

实用参考：

脚本索引：

开发中心：https://developer.mozilla.org/en/svg

热门参考：

官方文档：http://www.w3.org/tr/svg11/

dom core object api：http://reference.sitepoint.com/javascript/document

svg dom常用属性和方法:http://riso.iteye.com/blog/393454,