SVG与JS交互.doc

之前展示的SVG都缺乏交互性，只展示了它矢量图的“功力”，从本章开始，我们将进入SVG开发的核心章节，在脚本的帮助下，SVG将发挥出它更大的潜能。12.1 在SVG中使用JavaScript脚本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编码方式，所以在代码中有中文，甚至在注释中使用中文都可能使代码运行出现不确定的异常。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文档对象 u该例展示了如何在SVG文档被载入后，调用初始化程序，以获得SVG的DOM结构，为后续的编程做好准备。例程12-1中，u 处表示在SVG文档载入时激活的“onload”事件中执行“init”函数；“init”函数先是得到SVG Document对象，然后获得该对象的根元素（也就是“SVG”元素），最后的效果是弹出一个消息框，上面显示“SVG”。v 处的代码可以替换为“svgDoc = evt.getTarget().getOwnerDocument;”，得到的效果是一样的。12.2.2 DOM对象操作相关前面我们已经介绍过，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文档中的元素打开该文档后，弹出的消息框上显示“object SVGRectElement,object NodeList”。例程12-2中，u处使用“rect1”的ID名得到了“svgRoot”下属的一个矩形元素（SVGRectElement）。v是为了获得所有“svgRoot”下属的“”元素，返回的是一个“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”中的属性，就要加入相应的命名空间“/2000 /xlink/namespace/”。使用举例：object = svgdoc.setAttributeNS (/2000/xlink/namespace/, xlink:href, index.html)注意 绝对不要在同一个程序中混合使用DOM1非名称空间API和DOM2名称空间感知的API（例如，createElement和createElementNS）。如果使用名称空间，请尽量在根元素位置声明所有名称空间，并且不要覆盖名称空间前缀，否则情况会非常混乱。一般来说，只要按照惯例，就不会触发使你陷入麻烦的临界情况。例程12-3 设置SVG元素的属性例子中我们接触到了SVG中的事件，这跟HTML中的事件很相似，关于SVG的事件我们会在后面的章节中做详细介绍。这里用到了两个事件：一个是鼠标单击事件“onclick”，一个是鼠标移动到“”时触发的“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的元素Click the rectangle 在上面这个SVG文档中，没有看到对“rect”元素的定义，但是实际显示的时候还是显示了一个红色的矩形，原因就在于例程12-4中u处，我们使用“createElement”方法动态生成了一个矩形元素，并且逐个设置了它的“x”、“y”、“width”、“height”及“fill”属性，并且在v处为该元素添加了“mousemove”事件及事件相应的函数名。但是这样生成的矩形元素依旧还是“流离失所”，无法显示出来，需要使用appendChild、insertBefore、replaceChild等方法把生成的节点元素添加到其他元素下才能显示。所以，执行w处的语句后，生成的新元素被加入到名为“group”的组中去，从而显示出来。最终的DOM结构如图12-1所示。图12-1 动态生成SVG元素后的DOM结构从图12-1中可以看出，新加入的“rect”元素与之前就存在的“text”元素位置并列。 replaceChild(newElement, oldElement)方法在某元素的子节点中，使用新元素替代旧元素。使用举例：someElement.replaceChild（newNode, oldNode）例程12-5 replaceChild方法使用举例 w这个例子想要实现的效果是：单击一个黑色的矩形后，使它移动到新的位置，并且填充颜色变成蓝色。可以使用动画的办法来实现，但现在我们要用编写动态脚本的方法来实现。例程12-5中，w处已经存在一个黑色矩形了，单击后触发事件执行“change”函数。u的“obj”就是产生事件的“rect”元素，也就是此后要被替代掉的那个元素。然后创建一个新的“rect”元素，设置新的位置属性和填充颜色值。在v处进行元素的替代，w处的矩形元素就被替换成新的矩形元素，旧的矩形元素不复存在，从而也在显示区域内消失。 removeChild(Element)方法删除某元素下的指定元素。使用举例：someElement.replaceChild（Node） insertBefore(newElement,refElement)方法newElement是一个包含新子元素地址的对象，refElement是参照元素的地址，新子元素被插到参照元素之前。如果refElement参数没有包含在内，或者refElement不是此集合的成员，新的子元素会被插到该元素子元素列表的末尾。使用举例：objDocumentElement someElement.insertBefore（newNode, refNode） cloneNode(true/false)方法复制一个新的元素，并且返回对这个元素的引用。使用举例：someElement.cloneNode（true）例程12-6 删除、插入、复制一个新元素该例中有三个矩形元素，分别进行删除、插入和复制操作。例程12-6中，函数u进行删除元素的操作，直接调用“removeChild”方法，要删除的是在root元素下的“rect”元素，执行后，“rect”元素被删除，矩形也就消失了；函数v依旧是先在内存中生成一个新的“rect”元素，然后使用“insertBefore”方法把它插入到产生事件的那个“rect”元素的前面，两者是并列的位置；函数w先是“克隆”了一个与产生事件的“rect”元素一模一样的元素，并且返回给局部变量“newNode”，我们再对这个局部变量设置了属性“y”和填充颜色，然后把这个元素追加到“root”元素内的最后的位置，使它显示出来。 firstChild属性、getFirstChlid()方法获得某个元素的第一个子元素。使用举例：node = someElement.firstChild 或node = someElement.getFirstChild() childNodes属性、getChildNodes()方法获得某个元素下面所有的子元素。使用举例：nodeList = someElement.childNodes或nodeList = someElement.getChildNodes() item(n)方法当获得了一个元素集合的时候，需要使用该方法进行引用。使用举例：node = someElement.childNodes.items(1) NodeType属性节点类型，是一个枚举量。使用举例：i = someElement.NodeType详见表12-1。表12-1 节点类型返回的整数节点类型常数1ELEMENT_NODE2ATTRIBUTE_NODE3TEXT_NODE4CDATA_SECTION_NODE5ENTITY_REFERENCE_NODE6ENTITY_NODE7PROCESSING_INSTRUCTION_NODE8COMMENT_NODE9DOCUMENT_NODE10DOCUMENT_TYPE_NODE11DOCUMENT_FRAGMENT_NODE12NOTATION_NODE NodeName属性节点名。使用举例：name = someElement.NodeName详见表12-2。表12-2 节点名称返回的字符串说 明comment这是一个注释节点#document这是一个文档节点Element.tagName元素的标记名，同时也说明这是一个元素A属性的名字，同时也说明这是一个元素#text这是一个文本节点例程12-7 SVG节点操作W orld!这个例子帮助大家更加深刻地理解SVG的DOM树型结构。例程12-7中，u 是为了取到“svg”元素下的第一个子元素，也就是“script”元素，所以执行后消息框显示“First node of root：script”。v 是使用“getChildNodes”方法取到“svg”下所有子元素，然后再引用第2个元素（索引值同数组相同，从0开始），执行后消息框显示“First node of root：g”，也可以使用“root.firstChild. nextSibling.nodeName”语句获得同样的效果，这里的“nextSibling”属性指的是紧挨着某个元素的下一个元素。w 是取得“text”元素下的所有子元素，然后取得这些子元素的第一个元素也就是“tspan”元素，执行后显示“Third child node of text element:tspan”。在使用这些取节点元素的方法或者属性时，一定要小心地数好元素的排列顺序，稍有不慎就会引起错误，所以应该尽可能减少引用层次。 attributes获得某元素的属性集合。使用举例：attributes = someElement.attributes length属性、getLength()方法获得集合元素所含有元素的个数，如attributes、childNodes属性有此属性或方法。使用举例：len = attributes.length 或len = attributes.getLength（）例程12-8 SVG遍历元素值操作!CDATAfunction information(evt)obj=evt.target;att=obj.attributes; ustr=Attributs:nNumber: +att.length;for (i=0; i这个例子很好理解，就是遍历矩形元素的所有属性值，在u处，通过attributes获得一个属性值的集合，然后同“childNodes”属性类似，可以使用“item()”方法进行引用，从而获得相应的属性值，如图12-2所示。图12-2 遍历属性值的显示结果12.2.3 事件对象evt相关 clientX属性、getClientX()方法鼠标指针相对于浏览器窗口的客户区的X坐标。使用举例：cx = evt.clientX 或 cx = evt.getClientX() clientY属性、getClientY()方法鼠标指针相对于浏览器窗口的客户区的Y坐标。使用举例：cx = evt.clientY 或 cx = evt.getClientY()注意 这两个坐标并没有计算文档的滚动高度或者宽度，如果事件发生在窗口的最上边，不管这个文档已经向下滚动了多远，clientX或clientY都是0 screenX属性、getScreenX()方法鼠标指针相对于用户显示器左上角的X坐标。使用举例：sx = evt.screenX 或 sx = evt.getScreenX() screenY属性、getScreenY()方法鼠标指针相对于用户显示器左上角的Y坐标。使用举例：sx = evt.screenY 或 sx = evt.getScreenY()例程12-9 SVG动态获得和设置样式操作这个例子不复杂，就是获得鼠标当前的客户区坐标和屏幕坐标，这两个坐标其实有着“相对坐标”和“绝对坐标”的味道。但是很奇怪的是，在这个例子中，不论鼠标在什么地方，浏览器窗口在什么地方，两个坐标值总是相等的。 getCharCode()方法获得键盘输入的字符的ASCII码。使用举例：key = evt.getCharCode()例程12-10 SVG动态获得键盘输入字符 Display here例程12-10很有趣，用来实时地显示用户在键盘上输入的字符。首先使用u处的“getCharCode”方法获得字符的ASCII码，如果是控制键（如Ctrl、Alt、方向键等），则该方法自动过滤掉这些字符。v处的“String.fromCharCode”方法可以把获得的ASCII码转换成相应的字符。12.2.4 字符串及文本相关 createTextNode(TextContent)方法动态生成文本节点的文本内容。使用举例：text = svgdoc.createTextNode(SVG)例程12-11 SVG动态生成节点 例程12-11向我们展示了如何动态地生成一个文本节点，并添加这个节点文本内容。首先需要生成一个“text”元素，u处开始的代码就做了这样一件事情，相信大家已经很熟悉这种动态生成元素的方法了，这里不再赘述。v处的代码调用了“createTextNode”方法，参数就是“text”元素的文本内容，也就是要显示出来的内容。然后使用“appendChild”方法添加到新创建的“text”元素中去。最后再把整个新创建好的元素加入到根元素中。例子中没有任何实现定义好的“text”元素，完全通过脚本程序动态生成。 getNumberOfChars()方法获得元素所包含的文本字符的个数（包括空格）。使用举例：number = someElement.getNumberOfChars() getComputedTextLength()方法获得元素所包含的文本字符的显示长度。使用举例：len = someElement.getComputedTextLength() selectSubString(i,j) 方法高亮显示元素所包含的文本字符串中第i个字符（不包括i）后的j个字符。使用举例：letter = someElement.selectSubString (2,3)例程12-12 元素文本字符相关方法 Welcome to SVG world!上述三个方法是针对“text”元素的，只有“text”元素才能使用。例程12-12中，u处代码计算了该文本元素所含的文本字符的数字，此例是计算“Welcome to SVG world!”这个字符串的字符个数，一共有21个。v处代码计算字符串的显示长度，单位是像素。w处代码执行后，“lco”这几个字母呈现蓝色背景高亮显示，即第2个字母“l”后3个字母高亮显示。12.2.5 样式相关 style属性、getStyle()方法获得某元素的样式值，单独使用没有太大的意义，需要配合后续两个方