• 售前

  • 售后

热门帖子
入门百科

HTML5之SVG 2D入门12—SVG DOM及DOM操作先容

[复制链接]
lishuixiu006 显示全部楼层 发表于 2021-10-25 19:28:56 |阅读模式 打印 上一主题 下一主题
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于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 >
<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/393459

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作