SVG脚本编程介绍.doc

SVG脚本编程介绍 Svg脚本编程简介（一）本文主要介绍SVG的脚本编程，并分别给出放大、缩小，查询，鼠标事件等实例。一、???????????SVG简介SVG，全称为Scalable?Vector?Graphics（可伸缩矢量图形）。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点，比如可扩充性（scalable），动态的，交互性强。SVG支持无极放大，对SVG图片进行任意比例的放大都不会损害图片的显示（没有太多的失真），其他诸如BMP，JPEG格式的图片都不支持无级放大。SVG有动画元素，只要在SVG文件中嵌入SVG动画元素就可以实现动画效果了。同时SVG也定义了丰富的事件，包括鼠标事件和键盘事件，只要对SVG进行相关的脚本编程就可以实现SVG文件的交互操作。SVG带有许多基本的图形元素，只要通过组合基本图形元素就可以构建出SVG文件。二、???????????SVG脚本编程在SVG中，可以通过脚本编程来实现一些比较复杂的交互操作。SVG用script元素来在SVG文档中插入脚本，它的功能几乎和HTML中的script标记一样。其一般格式为：script?type=”text/JavaScript”![CDATA[??!—这里插入脚本程序段--?]]/scriptscript有两个属性，type=”content-type”，这里指明所用的script语言的类型。默认情况下script采用的语言是JavaScript语言。Xlink:href=”uri”指明引用外部脚本文件的url。下面的例子演示了SVG中的鼠标事件。svg?width=400?height=200script![CDATA[function?showmsg(){alert(you?had?clicked?the?green?rect);}]]/scriptg?id=rect1rect?id=rectangle?onclick=showmsg()?x=50?y=50?width=100?height=50?style=fill:green//g/svg在文本中输入上面代码，用IE打开，然后用鼠标点击绿色的矩形，将会提示“你点击了矩形”的信息。所以如果要实现对SVG的脚本编程，只需要在相关的元素上增加事件处理函数（onclick=showmsg()），然后在script标记中实现相关函数就可以了。另外时间处理函数的实现除可以放在SVG的script标记中外，也可以放在SVG嵌入的父HTML文件中，这样的话也可以方便的实现SVG和HTML的数据交换。例如下面的例子。Svg文件：1.svgsvg?width=400?height=200g?id=rect1rect?id=rectangle?onclick=showmsg()?x=50?y=50?width=100?height=50?style=fill:green//g/svgHTML文件：a.htmlhtmlheadtitleSVG事件/titlescript?language=javascript!—function?showmsg(){Alert(you?had?clicked?the?green?rect?);}?//--/scriptbody?embed?name=id1?pluginspage=”/svg/viewer/install/”?align=top?src=1.svg?height=200px?width=200px?type=image/svg+xml/body/html当你打开a.html文件后，你会发现效果跟上面的例子一样。SVG支持的事件有很多，比较常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件请查看:/TR/SVG/interact.html（另一部分为/Develop/read_article.asp?id=26677） ?三、???????????脚本编程应用实例本部分将通过几个实例来分析脚本程序在SVG中的应用。1、鼠标事件（演示鼠标事件的使用方法，以及常用的事件）请看下面的例子：svg?width=400?height=200script![CDATA[function?mout(){?alert(you?are?out);}]]/scriptg?id=rect1rect?id=rectangle1??onmouseout=mout()?x=50?y=50?width=150?height=150?style=fill:red//