HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
程序员文章站
2023-12-11 17:18:22
由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM,本文将详细介绍下SVG中的DOM操作,感兴趣的朋友可不要错过... 13-01-30...
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于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" 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. 通过事件参数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,
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" 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. 通过事件参数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,
推荐阅读
-
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
-
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
-
HTML5之SVG 2D入门5—颜色的表示及定义方式
-
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
-
HTML5之SVG 2D入门8—文档结构及相关元素总结
-
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
-
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
-
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
-
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
-
HTML5之SVG 2D入门10—滤镜的定义及使用