SVG脚本编程介绍(二)

类别:软件工程 点击:0 评论:0 推荐:

三、           脚本编程应用实例

本部分将通过几个实例来分析脚本程序在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)">&nbsp;

<input  type="button" value="清除" name="clear" onclick="clearaa()">

</form>

</body>

</html>

 

用IE打开aa.html,输入查询的值如”a1”,选择查询将可以看到有两个矩形高亮显示,这是查询的结果。清除可以消除高亮显示。

下面分析一下查询的过程。通过getSVGDocument()获取SVG文档的DOM(文档对象模型),然后再通过getElementById和ID(”id1”)来获取element的指针,再通过getChildNodes来获得其子节点,最后通过item(序号)来访问其子节点,并逐个判断其name属性的值是否跟要查询的值相同,从而决定是否高亮显示。这里需要注意的是子节点的序号是从1开始,并且以2递增的。

 

上面给出了脚本编程的例子,如果想了解更多的脚本编程方面的资料,请访问http://www.w3.org/TR/SVG/,里面有详细的SVG资料!

本文地址:http://com.8s8s.com/it/it37137.htm