SVG脚本编程简介(转)

SVG脚本编程简介

本文主要介绍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>标记一样。其一般格式为：

<![CDATA[

<!—这里插入脚本程序段-->

]]>

</script>

<script><![CDATA[

function showmsg()

{

alert("you had clicked the green rect");

}

]]></script>

</svg>

在文本中输入上面代码，用IE打开，然后用鼠标点击绿色的矩形，将会提示“你点击了矩形”的信息。

所以如果要实现对SVG的脚本编程，只需要在相关的元素上增加事件处理函数（οnclick="showmsg()"），然后在<script>标记中实现相关函数就可以了。

另外时间处理函数的实现除可以放在SVG的<script>标记中外，也可以放在SVG嵌入的父HTML文件中，这样的话也可以方便的实现SVG和HTML的数据交换。例如下面的例子。

Svg文件：1.svg

</svg>

HTML文件：a.html

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

<!—

function showmsg()

{

Alert("you had clicked the green rect ");

}

//-->

</script>

<body >

</body>

</html>

当你打开a.html文件后，你会发现效果跟上面的例子一样。

SVG支持的事件有很多，比较常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件请查看:
三、脚本编程应用实例

本部分将通过几个实例来分析脚本程序在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递增的。

转载于:https://www.cnblogs.com/cuihongyu3503319/archive/2007/09/30/911462.html

SVG脚本编程简介(转)相关推荐

【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[1]：验证模型
CKB 脚本编程简介[1]: 验证模型本文作者:Xuejie原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者: ...
Photoshop脚本编程简介
自动化对每个设计师的工作来说是很有用的.它可以在重复的任务上节省宝贵的时间,还能够帮我们更快捷.更容易的解决一系列问题. 你可以使用photoshop的动作来使工作流程自动化,这是很流行的,大多数人都 ...
Linux命令行与shell脚本编程大全:第2版
<Linux命令行与shell脚本编程大全:第2版> 基本信息作者: (美)布卢姆(Blum,R.) 布雷斯纳汉(Bresnahan.C.) [作译者介绍] 译者: 武海峰丛书名: 图 ...
《jQuery与JavaScript入门经典》——第 1 章　动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
arcgis下的python编程-面向ArcGIS的Python脚本编程
面向arcgis的python脚本编程是一本指导ArcGIS for Desktop专业用户进行Python开发的指南,本书将教会您如何通过编写Python代码处理空间数据并在ArcGIS中自动化实现 ...
基于arcgis的python脚本编程视频-面向ArcGIS的Python脚本编程 PDF 高清版
给大家带来的一篇关于Python相关的电子书资源,介绍了关于ArcGIS.Python.脚本编程方面的内容,本书是由人民邮电出版社出版,格式为PDF,资源大小49.9 MB,Paul编写,目前豆瓣.亚 ...
Shell脚本编程剖析（更新完毕）
课程简介: 课程包含了Linux/UNIX系统下的Bash编程知识和实例.通过循序渐进的脚本编程知识讲解,学员可以系统的学习脚本编程基础,课程中同时穿插了脚本实例和作业,以强化学员Bash编程 ...
python for arcgis_面向ArcGIS的Python脚本编程 ([美]赞德伯根) 中文pdf扫描版[50MB]
Python作为一种高级程序设计语言,凭借其简洁.易读及可扩展性日渐成为程序设计领域备受推崇的语言.使用Python作为ArcGIS的脚本语言将大大提升ArcGIS数据处理的效率,更好地实现ArcGI ...
arcgis工具python源码_面向Arcgis的python脚本编程_数据
[实例简介] <面向ArcGIS的Python脚本编程>是一本指导ArcGIS for Desktop专业用户进行Python开发的指南.该书将教会您如何通过编写Python代码处理空间数 ...

SVG脚本编程简介(转)

SVG脚本编程简介(转)相关推荐

最新文章

热门文章