SVG DOM常用属性和方法介绍

SVG DOM常用属性和方法介绍
2008.09.14 黄凯伟
12.2 SVG DOM常用属性和方法介绍

http://book.csdn.net/bookfiles/605/10060519574.shtml

　　将以Adobe SVG Viewer提供的属性和方法为准，因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同，有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。

12.2.1 文档初始化相关

　　evt属性

　　evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。它与普通JavaScript脚本中的event基本相同，只不过在普通JavaScript的脚本中简写成“e”。

　　ownerDocument属性

　　通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

　　使用举例：svgdoc = evt.target.ownerDocument

　　getOwnerDocument()方法

　　通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。

　　使用举例：svgdoc = evt.target.getOwnerDocument()

　　target属性

　　通过引用该属性获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

　　使用举例：object = evt.target

　　getTarget()方法

　　通过调用该方法获得事件产生于哪个SVG元素，有时可能是该元素的父元素。

　　使用举例：object = evt.getTarget()

　　例程12-1 获得SVG文档对象



style="fill:rgb(255,0,0);stroke-width:2"/>


　　该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。

　　例程12-1中，①处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVG Document对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。

　　②处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果是一样的。

12.2.2 DOM对象操作相关

　　前面我们已经介绍过，DOM对象是一个树型的结构，并且经过载入后就放在内存中供我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的方法中，有些是文档对象（Document）的方法，有些是文档元素（Element）的方法，需要区别开来。DOM可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本元素派生出的文档元素。文档对象是文档对象模型的顶级对象，它包含了整个文档的内容。各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。
(本文未完)