HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍_html5教程技巧

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月31日06:14:31 评论 38 views

使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式。由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为SVG DOM。当然了,由于目前IE不支持SVG,开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉,下面只是简单的看一下。

HTML页面中的DOM操作

DOM大家应该很熟悉了,这里先看一个小例子:

复制代码 代码如下:

发现了没,与普通的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

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月31日06:14:31
  • 转载请务必保留本文链接:https://www.qieseo.com/344204.html
canvas 动态图表 H5教程

canvas 动态图表

前言 canvas 强大的功能让它成为了 HTML5 中非常重要的部分,至于它是什么,这里就不需要我多作介绍了。而可视化图表,则是 canvas 强大功能的表现之一。 现在已经有了很多成熟的图表插件都...
推荐10款常用的图片压缩上传用法,欢迎下载! H5教程

推荐10款常用的图片压缩上传用法,欢迎下载!

下面小编就为大家带来一篇深入研究HTML5实现图片压缩上传功能。小编觉得挺不错的,现在分享给大家。也给大家一个参考,一起跟随小编过来看看吧上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机...
HTML5和Webkit实现树叶飘落动画 H5教程

HTML5和Webkit实现树叶飘落动画

HTML5和Webkit在一起会实现什么样的动画呢?本文给大家分享一段实例代码给大家介绍基于HTML5+Webkit实现树叶飘落动画效果,需要的朋友参考下吧,希望能帮组到大家。 实现如图所示的东西效果...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: