中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  SVG脚本编程介绍（二）  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=13494)

--  作者：卷积内核
--  发布时间：1/12/2005 4:22:00 PM

--  SVG脚本编程介绍（二）
三、           脚本编程应用实例

本部分将通过几个实例来分析脚本程序在SVG中的应用。

1、鼠标事件（演示鼠标事件的使用方法，以及常用的事件）

请看下面的例子：

<script><![CDATA[

function mout()

{

alert("you are out");

}

]]></script>

</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

<g>

</g>

</svg>

HTML文件：aa.html

<html><head><title>SVG事件</title>

<body >

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>

</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

</g>

</svg>

HTML文件：aa.html

<html><head><title>查询SVG属性</title>

<body >

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>

</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资料！

--  作者：yuxi2000
--  发布时间：1/13/2005 2:24:00 PM

--
很好哦
一定要支持

--  作者：molester
--  发布时间：1/14/2005 10:10:00 AM

--
多次放大呢？比如说我在图片上拉一个框，获取点击的坐标，如何将其设置为viewbox的属性，问题就是，我经过一次放大后，获取的坐标就不是绝对坐标，是相对的坐标了。

--  作者：天啦
--  发布时间：1/27/2005 4:35:00 PM

--
是啊，用心研究肯定能想出解决办法的

--  作者：_phoenix
--  发布时间：4/12/2005 11:54:00 PM

--
正好用得着.

--  作者：duoduo2005-1
--  发布时间：9/19/2005 9:34:00 PM

--
如何从SVG地图中查询某点的属性数据？

--  作者：cuijie
--  发布时间：9/27/2005 8:52:00 AM

--
基本概念

--  作者：starzxy
--  发布时间：4/24/2006 2:09:00 PM

--
hao !

W 3 C h i n a ( since 2003 ) 旗下站点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》

121.094ms