使用脚本动态操作svg

《使用脚本动态操作svg》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、使用脚本动态操作SVG文档陈珂 (chenke@snmobile.com),技术总监,南京安元科技简介： 本教程适用于那些希望使用可伸缩向量图形（SVG）创建交互式SVG图形的开发人员。它讨论了使用ECMAScript（JavaScript）对现有的SVG图像进行实时操作得技术。本文主要介绍在SVG中通过编程实现动态操作SVG图像的知识。SVG图像的结构是用XML文档表示的，因此可以使用XML编程技术如"文档对象模型（DocumentObjectModel，DOM）"来操纵它。本文描述了如何使用ECMAScript/JavaScript来支持与SVG

2、图像的交互。理论上说我们可以用这些知识实现类似射击游戏这样复杂的图形交互程序。有两种方法可以对SVG文档的DOM对象进行操作：通过JavaScript在SVG文档内部进行处理；在Batik环境下通过相关接口获取当前显示SVG视图的DOM对象引用使用Java语言对SVG文档进行处理。本文重点描述使用JavaScript对SVG进行操作的相关技术，并在文章最后用一个简单的例子实现Batik下通过Java实现操作DOM对象。另外还用相当的篇幅讨论了常用SVG浏览工具中支持的特殊ECMAScript/JavaScript用法，这些方法可以显著提高我们的开发速

3、度。1.理解SVG对象结构在SVG浏览器上下文环境（"上下文环境"一词来自"context"的直译）中，除了SVG本身作为XML文档所包含的DOM对象外，还包含一些其他对象，这些支持对象随着浏览工具的不同而在细节上有所区别。图1.SVG对象结构 Window是一个全局变量，该变量表示SVG运行时的浏览器窗口对象。因为脚本的运行就是在window对象内部进行的，所以调用该对象方法和属性时可以省去对window变量的指定，例如window.document可以直接通过document实现引用。完全介绍window对象的属性和方法内容已经超出了本文的范围，

4、有兴趣的读者可以通过参考资料查阅详细说明。Document是window对象中的静态全局变量，通过该变量我们可以立即获取当前浏览SVG图形的SVG文档对象（SVGDocument）。通过获取SVG文档对象我们就可以在DOM框架下对当前SVG文档的内容进行动态操作。contextMenu变量只在AdoboSVGViewer3.0中有效，该变量同document变量一样，也是window对象的静态全局变量。它引用了在AdoboSVGViewer3.0浏览环境下单击鼠标右键时所展示菜单的XML文档对象（Document），通过重新构建该变量引用的对象内容，

5、我们可以重新构建浏览时鼠标右键菜单的字体和条目。回页首2.将JavaScript脚本放在哪里使用JavaScript首先我们要解决一个简单的问题：我们把脚本代码放在哪里？SVG标准允许将JavaScript脚本代码以两种方式来实现:使用script元素将JavaScript脚本内嵌在SVG文件中；或使用script的xlink:href属性从SVG文件之外连接JavaScript脚本文件。从脚本实现的功能上来说，这两种代码加载方式没有区别，我们可以将共享的脚本代码放在外边连接文件中，把该SVG文件个性化的代码嵌在自身的文件中。下面是一个SVG文件和一

6、份JavaScript脚本文件，将这两个文件放在同一个文件夹下打开即可运行。表1：jslocation.svg1.2.4.5.

7、nBody_function(str){7.alert("Body_function->"+str)8.}9.]]>10.11.12.Body_function13.14.

8、on('onclike')"transform="translate(1600)">15.