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

使用脚本动态操作SVG文档陈珂 (chenke@),技术总监,南京安元科技简介: 本教程适用于那些希望使用可伸缩向量图形(SVG)创建交互式SVG图形开发人员。它讨论了使用ECMAScript(JavaScript)对现有SVG图像进行实时操作得技术。本文主要介绍在SVG中通过编程实现动态操作SVG图像知识。SVG图像结构是用XML文档表示,因此可以使用XML编程技术如"文档对象模型(DocumentObjectModel,DOM)"来操纵它。本文描述了如何使用ECMAScript/JavaScript来支持与SVG图像交互。理论上说我们可以用这些知识实现类似射击游戏这样复杂图形交互程序。有两种方法可以对SVG文档DOM对象进行操作:通过JavaScript在SVG文档内部进行处理;在Batik环境下通过相关接口获取当前显示SVG视图DOM对象引用使用Java语言对SVG文档进行处理。本文重点描述使用JavaScript对SVG进行操作相关技术,并在文章最后用一个简单例子实现Batik下通过Java实现操作DOM对象。另外还用相当篇幅讨论了常用SVG浏览工具中支持特殊ECMAScript/JavaScript用法,这些方法可以显著提高我们开发速度。("上下文环境"一词来自"context"直译)中,除了SVG本身作为XML文档所包含DOM对象外,还包含一些其他对象,这些支持对象随着浏览工具不同而在细节上有所区别。,该变量表示SVG运行时浏览器窗口对象。因为脚本运行就是在window对象内部进行,所以调用该对象方法与属性时可以省去对window变量指定,。完全介绍window对象属性与方法内容已经超出了本文范围,有兴趣读者可以通过参考资料查阅详细说明。Document是window对象中静态全局变量,通过该变量我们可以立即获取当前浏览SVG图形SVG文档对象(SVGDocument)。通过获取SVG文档对象我们就可以在DOM框架下对当前SVG文档内容进行动态操作。,该变量同document变量一样,也是window对象静态全局变量。(Document),通过重新构建该变量引用对象内容,我们可以重新构建浏览时鼠标右键菜单字体与条目。:我们把脚本代码放在哪里?SVG标准允许将JavaScript脚本代码以两种方式来实现:使用script元素将JavaScript脚本内嵌在SVG文件中;或使用scriptxlink:href属性从SVG文件之外连接JavaScript脚本文件。从脚本实现功能上来说,这两种代码加载方式没有区别,我们可以将共享脚本代码放在外边连接文件中,把该SVG文件个性化代码嵌在自身文件中。下面是一个SVG文件与一份JavaScript脚本文件,将这两个文件放在同一个文件夹下打开即可运行。表1:. <?