使用脚本动态操作 SVG 文档.docVIP

使用脚本动态操作 SVG 文档 陈珂?(chenke@), 技术总监, 南京安元科技 简介：?本教程适用于那些希望使用可伸缩向量图形（SVG）创建交互式 SVG 图形的开发人员。它讨论了使用ECMAScript（JavaScript）对现有的 SVG 图像进行实时操作得技术。 本文主要介绍在 SVG 中通过编程实现动态操作 SVG 图像的知识。 SVG 图像的结构是用 XML 文档表示的，因此可以使用 XML 编程技术如文档对象模型（Document Object Model，DOM）来操纵它。本文描述了如何使用 ECMAScript/JavaScript 来支持与 SVG 图像的交互。理论上说我们可以用这些知识实现类似射击游戏这样复杂的图形交互程序。 有两种方法可以对SVG文档的DOM对象进行操作：通过JavaScript在SVG文档内部进行处理；在Batik环境下通过相关接口获取当前显示SVG视图的DOM对象引用使用Java语言对SVG文档进行处理。本文重点描述使用JavaScript对SVG进行操作的相关技术，并在文章最后用一个简单的例子实现Batik下通过Java实现操作DOM对象。另外还用相当的篇幅讨论了常用SVG浏览工具中支持的特殊 ECMAScript/JavaScript 用法，这些方法可以显著提高我们的开发速度。 1. 理解 SVG 对象结构 在 SVG 浏览器上下文环境（上下文环境一词来自context的直译）中，除了 SVG 本身作为 XML 文档所包含的 DOM 对象外，还包含一些其他对象，这些支持对象随着浏览工具的不同而在细节上有所区别。 图 1. SVG 对象结构? Window 是一个全局变量，该变量表示 SVG 运行时的浏览器窗口对象。因为脚本的运行就是在 window 对象内部进行的，所以调用该对象方法和属性时可以省去对 window 变量的指定，例如 window.document 可以直接通过 document 实现引用。完全介绍 window 对象的属性和方法内容已经超出了本文的范围，有兴趣的读者可以通过参考资料查阅详细说明。 Document 是 window 对象中的静态全局变量，通过该变量我们可以立即获取当前浏览 SVG 图形的 SVG 文档对象（SVGDocument）。通过获取 SVG 文档对象我们就可以在 DOM 框架下对当前 SVG 文档的内容进行动态操作。 contextMenu 变量只在 Adobo SVG Viewer3.0中有效，该变量同 document 变量一样，也是 window 对象的静态全局变量。它引用了在Adobo SVG Viewer3.0浏览环境下单击鼠标右键时所展示菜单的 XML 文档对象（Document），通过重新构建该变量引用的对象内容，我们可以重新构建浏览时鼠标右键菜单的字体和条目。 回页首 2. 将 JavaScript 脚本放在哪里 使用 JavaScript 首先我们要解决一个简单的问题：我们把脚本代码放在哪里？SVG 标准允许将JavaScript 脚本代码以两种方式来实现:使用 script 元素将 JavaScript 脚本内嵌在 SVG 文件中；或使用script 的 xlink:href 属性从 SVG 文件之外连接 JavaScript 脚本文件。从脚本实现的功能上来说，这两种代码加载方式没有区别，我们可以将共享的脚本代码放在外边连接文件中，把该 SVG 文件个性化的代码嵌在自身的文件中。 下面是一个 SVG 文件和一份 JavaScript 脚本文件，将这两个文件放在同一个文件夹下打开即可运行。 表1： jslocation.svg 1. ?xml version=1.0 encoding=UTF-8? 2. svg 3. xmlns=/2000/svg xmlns:xlink=/1999/xlink 4. script language=JavaScript xlink:href=lib.js / 5. script language=JavaScript![CDATA[ 6. function Body_function(str){ 7. alert(Body_function-+str) 8. } 9. ]]/script 10. g id=funciton_load transform=translate(10 10) 11. g onclick=Body_function(onclike) transform=translate(0 0) 12. text x=6px y=30px style=font-size:20Body_function/text 13. /g 14. g onclick=L