一 SVG简介
SVG，全称为Scalable Vector Graphics（可伸缩矢量图形）。它是W
SVG带有许多基本的图形元素，只要通过组合基本图形元素就可以构建出SVG文件。
二、 SVG脚本编程
在SVG中，可以通过脚本编程来实现一些比较复杂的交互操作。SVG用<script>元素来在SVG文档中插入脚本，它的功能几乎和HTML中的<script>标记一样。其一般格式为：
<script type=”text/javascript”>
<![CDATA[
<!—这里插入脚本程序段-->
]]>
</script>
<script>有两个属性，type=”content-type”，这里指明所用的script语言的类型。默认情况下script采用的语言是javascript语言。Xlink:href=”<uri>”指明引用外部脚本文件的url。下面的例子演示了SVG中的鼠标事件。
<svg width="400" height="200">
<script><![CDATA[
function showmsg()
{
alert("you had clicked the green rect");
}
]]></script>
<g id="rect1">
<rect 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.svg
<svg width="400" height="200">
<g id="rect1">
<rect id="rectangle" onclick="showmsg()" x="50" y="50" width="100" height="50" style="fill:green"/></g>
</svg>
HTML文件：a.html
<html><head><title>SVG事件</title>
<script language=javascript>
<!—
function showmsg()
{
Alert("you had clicked the green rect ");
}
//-->
</script>
<body >
<embed name="id1" pluginspage=”http://www.adobe.com/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等等。更多的事件请查看:
http://www.w3.org/TR/SVG/interact.html
三、 脚本编程应用实例
本部分将通过几个实例来分析脚本程序在SVG中的应用。
1、鼠标事件（演示鼠标事件的使用方法，以及常用的事件）
请看下面的例子：
<svg width="400" height="200">
<script><![CDATA[
function mout()
{
alert("you are out");
}
]]></script>
<g id="rect1">
<rect id="rectangle1" onmouseout="mout()" x="50" y="50" width="150" height="150" style="fill:red"/>
</g>
</svg>
用IE打开上面的SVG文件，当你的鼠标移开红色的矩形框的时候，将会弹出提示信息"you are out"。
下面给出常见的鼠标事件和其触发条件。
onmouseout
当鼠标移开一个物体(element)的时候触发该事件
onmousedown
当在一个物体(element)上按下鼠标键时触发该事件
onmouseup
当在一个物体(element)上松开鼠标键时触发该事件
onmousemove
当鼠标在一个物体(element)上移动时触发该事件
onclick
当鼠标点击物体(element)的时候将触发该事件
更多的事件请参看http://www.w3.org/TR/SVG/interact.html。
对鼠标事件需要注意的是有时候可能同时有几个事件同时发生，我们可以通过试验得出响应事件的执行顺序。
2、放大、缩小（演示脚本语言对SVG中相关元素的属性控制）
SVG的浏览器插件带有放大、缩小的功能，但是在实际的应用中，我们需要自己编程实现SVG图象文件的放大、缩小。下面的例子通过SVG的更改viewbox属性来实现放大、缩小功能。（处理函数放在父HTML文件中）
SVG文件:1.svg
<svg viewBox="0 0 400 200" id="mainview">
<g>
<text id="texte" x="200" y="100" style="text-anchor:middle;font-size:25;font-family:Arial;fill:red">haha ,here!</text>
</g>
</svg>
HTML文件：aa.html
<html><head><title>SVG事件</title>
<body >
<script language="javascript" >
function fda()
{
var SvgMainMapDoc=id1.getSVGDocument();
var OverMapview=SvgMainMapDoc.getElementById("mainview");
OverMapview.setAttribute("viewBox","100 50 200 100");
}
function sxiao()
{
var SvgMainMapDoc=id1.getSVGDocument();
var OverMapview=SvgMainMapDoc.getElementById("mainview");
OverMapview.setAttribute("viewBox","-200 -100 800 400");
}
</script>
<embed name="id1" pluginspage=http://www.adobe.com/svg/viewer/install/ align="top" src="1.svg" height="200px" width="400px" type="image/svg+xml">
<input type="button" value="放大" name="fda" onclick="fda()">
<input type="button" value="缩小" name="sxiao" onclick="sxiao()">
</body>
</html>
用IE打开aa.html，按下放大，缩小按钮将可以看到放大、缩小的效果。HTML中通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，然后再通过getElementById和ID来获取element的指针，然后通过setAttribute来设置element（即本例中ID为mainview的svg元素）。上面用到的几个函数都是DOM函数，更多的DOM函数及介绍可以在http://pilat.free.fr/routines/js_dom.htm上获得。
下面介绍一下通过viewbox放大、缩小的原理。Viewbox中有四个数字，分别表示最小的x坐标，y坐标，最大x坐标和最小x坐标之差，最大y坐标和最小y坐标之差。也就是说viewbox表示的是当前的显示范围，因此只要改变viewbox的值就可以实现SVG图象的放大和缩小。
3、属性查询、高亮显示
属性查询在现实中有着许多的应用，通过查询可以得出我们感兴趣的东西。下面介绍如果实现对SVG属性的查询。
SVG文件:1.svg
<svg viewBox="0 0 400 400" id="mainview">
<g id="id1">
<rect id="rectangle" name="a1" x="0" y="0" width="50" height="50" style="fill:green"/>
<rect id="rectangle1" name="a2" x="50" y="50" width="50" height="50" style="fill:green"/>
<rect id="rectangle2" name="a3" x="100" y="100" width="50" height="50" style="fill:green"/>
<rect id="rectangle3" name="a4" x="150" y="150" width="50" height="50" style="fill:green"/>
<rect id="rectangle4" name="a5" x="200" y="200" width="50" height="50" style="fill:green"/>
<rect id="rectangle5" name="a6" x="250" y="250" width="50" height="50" style="fill:green"/>
<rect id="rectangle6" name="a7" x="300" y="300" width="50" height="50" style="fill:green"/>
<rect id="rectangle7" name="a1" x="350" y="350" width="50" height="50" style="fill:green"/>
</g>
</svg>
HTML文件：aa.html
<html><head><title>查询SVG属性</title>
<body >
<script language="javascript" >
function search(searchvalue)
{
var SvgMainMapDoc=id1.getSVGDocument();
SvgObj=SvgMainMapDoc.getElementById('g1');
SvgObj1=SvgObj.getChildNodes;
for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
{
if(SvgObj1.item(iCount).getAttribute("name")==searchvalue)
{
Svgstyle1=SvgObj1.item(iCount).getstyle();
Svgstyle1.setProperty('fill','green');
}
}
}
function clearaa()
{
var SvgMainMapDoc=id1.getSVGDocument();
SvgObj=SvgMainMapDoc.getElementById('g1');
SvgObj1=SvgObj.getChildNodes;
for(iCount=1;iCount<((SvgObj1.length)-1);iCount+=2)
{
Svgstyle1=SvgObj1.item(iCount).getstyle();
Svgstyle1.setProperty('fill','red');
}
}
</script>
<embed name="id1" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="1.svg" height="200px" width="400px" type="image/svg+xml">
<form name="searchvalue">
<input name="value1" size="12"><input type="button" value="查询" name="search1" onclick="search(this.form.value1.value)">
<input type="button" value="清除" name="clear" onclick="clearaa()">
</form>
</body>
</html>
用IE打开aa.html，输入查询的值如”a
下面分析一下查询的过程。通过getSVGDocument()获取SVG文档的DOM(文档对象模型)，然后再通过getElementById和ID（”id
上面给出了脚本编程的例子，如果想了解更多的脚本编程方面的资料，请访问http://www.w3.org/TR/SVG/，里面有详细的SVG资料！
正文
SVG的脚本编程2005-12-20 16:10:00
【评论】 【打印】 【字体：大 中 小】 本文链接：http://blog.pfan.cn/ddtme/8625.html
阅读(5289) | 评论(1)
版权声明：编程爱好者网站为此博客服务提供商，如本文牵涉到版权问题，编程爱好者网站不承担相关责任，如有版权问题请直接与本文作者联系解决。谢谢！
评论