使用avaScript脚本动态操作 SVG 文档

使用脚本动态操作 SVG 文档

陈珂 ( chenke@snmobile.com), 技术总监, 南京安元科技

简介： 本教程适用于那些希望使用可伸缩向量图形（SVG）创建交互式 SVG 图形的开发人员。它讨论了使用ECMAScript（JavaScript）对现有的 SVG 图像进行实时操作得技术。

发布日期： 2005 年 5 月 01 日 

 from http://www.ibm.com/developerworks/cn/xml/x-svgscript/index.html

本文主要介绍在 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 脚本文件