搜索
12.1在SVG中使用JavaScript脚本JavaScript脚本在SVG中分为内部脚本和外部脚本两种，内部和外部只是引用方式的区别，对程序的编写不造成影响。首先介绍一下内部脚本，它是以如下形式嵌入到SVG文档中的：script![CDATA[//WirteJavaScriptCode…]]/scriptSVG采用script标签，与将JavaScript脚本加入HTML页面的script标签相似，但又不尽相同。这种内嵌代码，必须使用CDATA节，CDATA为XmlNodeType的一个枚举值，被称为CDATA节。CDATA节用于转义那些会被识别为XML标记的文本块，CDATA节点不能有任何子节点。这种内部脚本使用起来很方便，但是一旦JavaScript脚本数量很庞大时，就会与SVG的图形代码混合在一起，不易维护，所以SVG有了外部脚本这种引用方式，带给大家另外一种选择。外部脚本的引用方式形如：scriptxlink:href=MapControl.jslanguage=JavaScript/上面引用的是一个JS脚本文件，里面都是JavaScript脚本代码，此处使用了“xlink”的链接方式，而不是在HTML中的“src”。这个例子是JS脚本文件与SVG文件在同一个目录中，如果在不同的目录中，请设置好“xlink:href”属性。外部脚本方式使得负责逻辑的JavaScript脚本与负责图形生成与显示的SVG代码分离开来，增强了代码的可维护性，是值得推荐的做法。注意SVG引用外部脚本文件不一定是以utf编码方式引入的，或者外部脚本文件不是utf编码方式，所以在代码中有中文，甚至在注释中使用中文都可能使代码运行出现不确定的异常。12.2SVGDOM常用属性和方法介绍将以AdobeSVGViewer提供的属性和方法为准，因为不同解析器对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文档对象svgwidth=640height=480onload=init(evt)uscript![CDATA[functioninit(evt){svgDoc=evt.target.ownerDocument;vsvgRoot=svgDoc.rootElement;alert(svgRoot.nodeName);}]]/scriptrectx=100y=100width=100height=50fill=redstroke-width=2//svg该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。例程12-1中，u处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVGDocument对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。v处的代码可以替换为“svgDoc=evt.getTarget().getOwnerDocument;”，得到的效果是一样的。12.2.2DOM对象操作相关前面我们已经介绍过，DOM对象是一个树型的结构，并且经过载入后就放在内存中供我们读写。如何对这棵树进行操作，也就成为发挥SVG交互性很关键的一步。下面所示的方法中，有些是文档对象（Document）的方法，有些是文档元素（Element）的方法，需要区别开来。DOM可以分为三大部分：文档基本元素、文档对象和各种类型的从文档基本元素派生出的文档元素。文档对象是文档对象模型的顶级对象，它包含了整个文档的内容。各种类型的文档元素派生自文档基本元素类型，用于描述文档中各种实际存在的元素。其中可以定义一种文档元素，它们可以容纳其他的文档元素，这些元素就是容器元素，实际上文档对象就是最大的容器元素。由于文档对象模型中存在容器元素，因此所有的对象都组成一个树状结构，称为文档对象树或者DOM树，其中根节点就是文档对象。—getElementById(ID_Name)方法通过元素的ID名获得该元素。使用举例：object=svgdoc.getElementById(map)—getElementsByTagName(Tag_Name)方法通过元素名获得一个或者一组元素，注意方法名中的“Elements”是复数，说明返回的元素可能有多个，是一个“NodeList”。使用举例：object=svgdoc.getElementsByTagName(rect)例程12-2获得SVG文档中的元素svgwidth=640height=480onload=init(evt)script![CDATA[functioninit(evt){svgDoc=evt.target.ownerDocument;svgRoot=svgDoc.rootElement;rect=svgRoot.getElementById(rect1);urects=svgRoot.getElementsByTagName(rect);valert(rect+,+rects);}]]/scriptrectid=rect1x=100y=100width=100height=50fill=red/rectid=rect2x=100y=200width=100height=50fill=red/rectid=rect3x=100y=300width=100height=50fill=red//svg打开该文档后，弹出的消息框上显示“[objectSVGRectElement],[objectNodeList]”。例程12-2中，u处使用“rect1”的ID名得到了“svgRoot”下属的一个矩形元素（SVGRectElement）。v是为了获得所有“svgRoot”下属的“rect”元素，返回的是一个“NodeList”，本例中一共有三个符合条件的元素。—getAttribute(ID_Name)方法根据所提供的ID名来获得元素的属性值。使用举例：color=node.getAttribute(fill)—setAttribute(Attribute_Name,Value)方法设置该元素属性名为“Attribute_Name”的，属性的值为“Value”。使用举例：color=node.getAttribute(fill)—setAttributeNS(NameSpace,Attribute_Name,Value)方法功能效果同setAttribute方法，区别就是增加了为属性名加上命名空间（NameSpace）。在ASV3.0中，属性名都是默认SVG的命名空间，所以不需要再特别注明，但是如果你要使用“xlink”中的属性，就要加入相应的命名空间“”。使用举例：object=svgdoc.setAttributeNS(:href,index.html)注意绝对不要在同一个程序中混合使用DOM1非名称空间API和DOM2名称空间感知的API（例如，createElement和createElementNS）。如果使用名称空间，请尽量在根元素位置声明所有名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。一般来说，只要按照惯例，就不会触发使你陷入麻烦的临界情况。例程12-3设置SVG元素的属性svgwidth=640height=480onload=init(evt)script![CDATA[functioninit(evt){svgDoc=evt.target.ownerDocument;svgRoot=svgDoc.rootElement;rect1=svgRoot.getElementById(rect1);rect2=svgRoot.getElementById(rect2);}functionsetSvgAttribute(evt,flag){if(flag==1)rect1.setAttribute(fill,green);uelse{rect2.setAttributeNS(null,fill,green);v}}functiongetSvgAttribute(evt){alert(rect1.getAttribute(fill)+,+rect1.getAttribute(height));w}]]/scriptrectid=rect1x=100y=100width=100height=50fill=redonclick=getSvgAttribute(evt)onmousemove=setSvgAttribute(evt,1)/rectid=rect2x=100y=200width=100height=50fill=redonclick=setSvgAttribute(evt,2)//svg这里例子中我们接触到了SVG中的事件，这跟HTML中的事件很相似，关于SVG的事件我们会在后面的章节中做详细介绍。这里用到了两个事件：一个是鼠标单击事件“onclick”，一个是鼠标移动到“rect”时触发的“onmousemove”事件，，注意它们的大小写，全部是小写，否则事件无法激活，浏览器会报告脚本错误。我们想要实现的效果是，单击ID为“rect1”的矩形时，能得到它的填充颜色值和矩形的高度值，并且鼠标移动到该矩形的时候，矩形的填充颜色从红色变成绿色；另外一个矩形，我们在单击它的时候，它的填充颜色从红色变成绿色。例程12-3中，u处设置矩形“rect1”的“fill”属性为“green”；。v通过命名空间来设置属性值。不过命名空间参数的值是“null”，因为ASV3.0已经内置了命名空间，所以你再给这些SVG的属性添加命名空间的话就会出错，所以填入“null”值。w是为了弹出消息框，显示我们需要知道的那两个属性值。—createElement(Element_Type)方法在DOM对象内创建一个新的元素，可以指定创建哪一种类型的元素，并且返回对这个新元素的引用。使用举例：newnode=svgdoc.createElement（rect）—appendChild(Element)方法在该元素的最后追加一个孩子节点。使用举例：someElement.appendChild（node）例程12-4动态创建SVG的元素svgwidth=640height=480onload=init(evt)script![CDATA[functionalertMsg(evt){objet=evt.