SVG脚本编程介绍(二)

原创 2004年04月12日 13:01:00

三、           脚本编程应用实例<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

本部分将通过几个实例来分析脚本程序在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(文档对象模型),然后再通过getElementByIdID来获取element的指针,然后通过setAttribute来设置element(即本例中IDmainviewsvg元素)。上面用到的几个函数都是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(文档对象模型),然后再通过getElementByIdID”id1”)来获取element的指针,再通过getChildNodes来获得其子节点,最后通过item(序号)来访问其子节点,并逐个判断其name属性的值是否跟要查询的值相同,从而决定是否高亮显示。这里需要注意的是子节点的序号是从1开始,并且以2递增的。

 

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

SVG脚本编程的一些技巧

1、在IE中如何调试SVG中的脚本 a、去掉IE设置中的“禁止脚本调试” b、打开注册表,找到“[HKEY_CURRENT_USER\Software\Microsoft\Windows Scri...

SVG脚本编程的一些技巧

1、在IE中如何调试SVG中的脚本 a、去掉IE设置中的“禁止脚本调试” b、打开注册表,找到“[HKEY_CURRENT_USER\Software\Microsoft\Windows Scri...
  • mtfsoft
  • mtfsoft
  • 2012年04月28日 20:55
  • 875

Svg脚本编程简介

本文主要介绍SVG的脚本编程,并分别给出放大、缩小,查询,鼠标事件等实例。 一、           SVG简介 SVG,全称为Scalable Vector Graphics(可伸缩矢量图形)。...

高级Bash脚本编程指南(3):变量和参数的介绍

高级Bash脚本编程指南(3):变量和参数的介绍 成于坚持,败于止步 变量替换 变量的名字就是变量保存值的地方. 引用变量的值就叫做变量替换.“$“这个符号就好像是一种标志 让我们仔细...

shell脚本编程(二)

shell脚本编程(二) 可以在shell脚本中使用管道或者重定向循环输出结果。 shell执行程序的位置参数通过标准数字表示时,其中0为程序名称,0为程序名称,1为第一个参数。类推。如果参数大于9个...

脚本编程 Bash One-Liners Explained 译文(二)(转载自团子的小窝)

这是 Bash One-Liners Explained 系列的第二篇文章。在这一篇里,我会给你们介绍如何用 Bash 来完成各种各样的字符串操作。我会选择用最合适的 Bash 方法,各种常见的语...

Linux shell脚本编程入门(二) 循环语句

前面有了变量的概念和逻辑运算符,就可以写判断语句了,不过这里注意中括号的两边必须得留空格,不然报错. 运算符 赋值, 用 let 语句, 如 let "a=1"算数运算, 支持 +  -  *  /...

高级Bash脚本编程指南(26):文本处理命令(二)

高级Bash脚本编程指南(26):文本处理命令(二) 成于坚持,败于止步 处理文本和文本文件的命令 look look命令与grep命令很相似, 但是这个命令只能做"字典查询", 也就是它所搜...

高级Bash脚本编程指南(29):文件与归档命令(二)

高级Bash脚本编程指南(29):文件与归档命令(二) 成于坚持,败于止步 Comparison diff, patch diff: 一个非常灵活的文件比较工具. 这个工具将会以一行接一行的形...

Linux Shell脚本编程入门篇之二

一、什么是脚本?        提前写好可执行代码,用来完成特定任务的文件,是一个顺序批处理的解释性程序。常见的脚本语言如下图所示:         二、脚本的创建过程:         写出自己的第...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG脚本编程介绍(二)
举报原因:
原因补充:

(最多只允许输入30个字)