之前展示的SVG都缺乏交互性,只展示了它矢量图的“功力”,从本章开始,我们将进入 SVG开发的核心章节,在脚本的帮助下,SVG将发挥出它更大的潜能。 12.1 在 SVG 中使用 Jav aScript 脚本 JavaScript脚本在 SVG中分为内部脚本和外部脚本两种,内部和外部只是引用方式的区别,对程序的编写不造成影响。首先介绍一下内部脚本,它是以如下形式嵌入到 SVG文档中的: SVG采用
之前展示的SVG都缺乏交互性,只展示了它矢量图的“功力”,从本章开始,我们将进入 SVG开发的核心章节,在脚本的帮助下,SVG将发挥出它更大的潜能
1 在 SVG 中使用 Jav aScript 脚本 JavaScript脚本在 SVG中分为内部脚本和外部脚本两种,内部和外部只是引用方式的区别,对程序的编写不造成影响
首先介绍一下内部脚本,它是以如下形式嵌入到 SVG文档中的: SVG采用标签,与将 JavaScript脚本加入 HTML页面的标签相似,但又不尽相同
这种内嵌代码,必须使用 CDATA节,CDATA为 XmlNodeType的一个枚举值,被称为 CDATA节
CDATA节用于转义那些会被识别为 XML标记的文本块,CDATA 节点不能有任何子节点
这种内部脚本使用起来很方便,但是一旦 JavaScript脚本数量很庞大时,就会与 SVG的图形代码混合在一起,不易维护,所以 SVG有了外部脚本这种引用方式,带给大家另外一种选择
外部脚本的引用方式形如: 上面引用的是一个 JS脚本文件,里面都是 JavaScript脚本代码,此处使用了“xlink”的链接方式,而不是在 HTML中的“src”
这个例子是 JS脚本文件与 SVG文件在同一个目录中,如果在不同的目录中,请设置好“xlink:href”属性
外部脚本方式使得负责逻辑的JavaScript脚本与负责图形生成与显示的SVG代码分离开来,增强了代码的可维护性,是值得推荐的做法
注意 SVG引用外部脚本文件不一定是以 utf 编码方式引入的,或者外部脚本文件不是 utf编码方式,所以在代码中有中文,甚至在注释中使用中文都可能使代码运行出现不确定的异常
2 SVG DOM 常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以