使用脚本动态操作 SVG 文档

使用脚本动态操作 SVG 文档

级别： 初级 陈珂 (chenke@snmobile.com), 技术总监, 南京安元科技 2005 年 5 月 01 日 本教程适用于那些希望使用可伸缩向量图形（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 用法，这些方法可以显著提高我们的开发速度。