本文主要介绍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[
<!—这里插入脚本程序段-->
]]>
</script>
<script>有两个属性，type=”content-type”，这里指明所用的script语言的类型。默认情况下script采用的语言是javascript语言。Xlink:href="/blog/”<";uri>”指明引用外部脚本文件的url。下面的例子演示了SVG中的鼠标事件。
<svg width="400" height="200">
<script><![CDATA[
function showmsg()
{
alert("you had clicked the green rect");
}
]]></script>
<g >
</body>
</html>
当你打开a.html文件后，你会发现效果跟上面的例子一样。
SVG支持的事件有很多，比较常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件请查看:
三、脚本编程应用实例
本部分将通过几个实例来分析脚本程序在SVG中的应用。
1、鼠标事件（演示鼠标事件的使用方法，以及常用的事件）
请看下面的例子：
<svg width="400" height="200">
<script><![CDATA[
function mout()
{
alert("you are out");
}
]]></script>
<g >
</form>
</body>
</html>
用IE打开aa.html，输入查询的值如”a1”，选择查询将可以看到有两个矩形高亮显示，这是查询的结果。清除可以消除高亮显示。
下面分析一下查询的过程。通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，然后再通过getElementById 和ID（”id1”）来获取element的指针，再通过getChildNodes来获得其子节点，最后通过item(序号)来访问其子节点，并逐个判断其name属性的值是否跟要查询的值相同，从而决定是否高亮显示。这里需要注意的是子节点的序号是从1开始，并且以2递增的。
程序员的基础教程：菜鸟程序员