SVGDOM常用属性和方法介绍.docVIP

SVG DOM常用属性和方法介绍 将以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文档对象 svg width=640 height=480 onload=init(evt) u script![CDATA[ function init(evt) { svgDoc = evt.target.ownerDocument; v svgRoot = svgDoc.rootElement; alert(svgRoot.nodeName); } ]]/script rect x=100 y=100 width=100 height=50 fill=red stroke-width= 2/ /svg 该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。 例程12-1中，u 处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVG Document对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。 v 处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果是一样的。 12.2.2? DOM对象操作相关 前面我们已经介绍过，DOM对象是一个树型的结构，并且经过载入后就放在内存中供我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的方法中，有些是文档对象（Document）的方法，有些是文档元素（Element）的方法，需要区别开来。DOM可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本元素派生出的文档元素。文档对象是文档对象模型的顶级对象，它包含了整个文档的内容。各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。 —? getElementById(ID_Name)方法 通过元素的ID名获得该元素。 使用举例：object = svgdoc.getElementById(map) —? getElementsByTagName(Tag_Name)方法 通过元素名获得一个或者一组元素，注意方法名中的“Elements”是复数，说明返回的元素可能有多个，是一个“NodeList”。 使用举例：object = svgdoc.getElementsByTagName (rect) 例程12-2? 获得SVG文档中的元素 svg width=640 height=480 onload=init(evt) script![CDATA[ function init(evt) { ??? ??? svgDoc = evt.target.ownerDocument; ??? ??? svgRoot = svgDoc.rootElement; ??? ??? rect??? = svgRoot.getElementById(rect1);u ??? ??? rects?? = svgRoot.getElementsByTa