SVG与JS交互.doc

之前展示的SVG都缺乏交互性，只展示了它矢量图的“功力”，从本章开始，我们将进入SVG开发的核心章节，在脚本的帮助下，SVG将发挥出它更大的潜能。 12.1? 在SVG中使用JavaScript脚本 JavaScript脚本在SVG中分为内部脚本和外部脚本两种，内部和外部只是引用方式的区别，对程序的编写不造成影响。首先介绍一下内部脚本，它是以如下形式嵌入到SVG文档中的： script![CDATA[ ?????? //Wirte JavaScript Code… ]]/script SVG采用script标签，与将JavaScript脚本加入HTML页面的script标签相似，但又不尽相同。这种内嵌代码，必须使用CDATA节，CDATA为XmlNodeType的一个枚举值，被称为CDATA节。CDATA节用于转义那些会被识别为XML标记的文本块，CDATA 节点不能有任何子节点。 这种内部脚本使用起来很方便，但是一旦JavaScript脚本数量很庞大时，就会与SVG的图形代码混合在一起，不易维护，所以SVG有了外部脚本这种引用方式，带给大家另外一种选择。 外部脚本的引用方式形如： script xlink:href=MapControl.js language=JavaScript/ 上面引用的是一个JS脚本文件，里面都是JavaScript脚本代码，此处使用了“xlink”的链接方式，而不是在HTML中的“src”。这个例子是JS脚本文件与SVG文件在同一个目录中，如果在不同的目录中，请设置好“xlink:href”属性。外部脚本方式使得负责逻辑的JavaScript脚本与负责图形生成与显示的SVG代码分离开来，增强了代码的可维护性，是值得推荐的做法。 注意? SVG引用外部脚本文件不一定是以?utf?编码方式引入的，或者外部脚本文件不是utf编码方式，所以在代码中有中文，甚至在注释中使用中文都可能使代码运行出现不确定的异常。 12.2? SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准，因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同，有些方法和属性是某个解析器所特有的。SVG支持DOM2标准。 12.2.1? 文档初始化相关 —? evt属性 evt表示事件本身，可以通过evt获取与当前事件相关的信息，用户可以在script中定义响应函数，进行相应的处理。它与普通JavaScript脚本中的event基本相同，只不过在普通JavaScript的脚本中简写成“e”。 —? ownerDocument属性 通过引用该属性获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。 使用举例：svgdoc = evt.target.ownerDocument —? getOwnerDocument()方法 通过调用该方法获得当前SVG文件的文档对象，也就是得到SVG的DOM结构。 使用举例：svgdoc = evt.target.getOwnerDocument() —? target属性 通过引用该属性获得事件产生于哪个SVG元素，有时可能是该元素的父元素。 使用举例：object = evt.target —? getTarget()方法 通过调用该方法获得事件产生于哪个SVG元素，有时可能是该元素的父元素。 使用举例：object = evt.getTarget() 例程12-1? 获得SVG文档对象 svg width=640 height=480 onload=init(evt) u script![CDATA[ function init(evt) { svgDoc = evt.target.ownerDocument; svgRoot = svgDoc.rootElement; alert(svgRoot.nodeName); } ]]/script rect x=100 y=100 width=100 height=50 fill=red stroke-width= 2/ /svg 该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。 例程12-1中，u 处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVG Document对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。 v 处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果是一样的。 12.2.2? DOM对象操作相关 前面我们已经介绍过，DOM对象是一个树型的结构，并且