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

<script type=”text/javascript”>

<![CDATA[

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

]]>

</script>

<script>有两个属性，type=”content-type”，这里指明所用的script语言的类型。默认情况下script采用的语言是javascript语言。Xlink:href="/blog/”<";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="/blog/1.svg" height="200px" width="200px" type="image/svg+xml">

</body>

</html>

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

SVG支持的事件有很多，比较常用的有onclick，onmousedown，onmouseup，onmouseout，onmousemove，onload等等。更多的事件请查看:

            

             三、脚本编程应用实例

本部分将通过几个实例来分析脚本程序在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="/blog/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="/blog/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，输入查询的值如”a1”，选择查询将可以看到有两个矩形高亮显示，这是查询的结果。清除可以消除高亮显示。

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

程序员的基础教程：菜鸟程序员

SVG脚本编程简介的更多相关文章

  1. 【在 Nervos CKB 上做开发】Nervos CKB脚本编程简介[2]：脚本基础

    CKB脚本编程简介[2]:脚本基础 原文作者:Xuejie 原文链接:Introduction to CKB Script Programming 2: Script 本文译者:Shooter,Jas ...

  2. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[1]：验证模型

    CKB 脚本编程简介[1]: 验证模型 本文作者:Xuejie 原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者 ...

  3. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[3]：自定义代币

    原文作者:Xuejie 原文链接:https://xuejie.space/2019_09_06_introduction_to_ckb_script_programming_udt/ Nervos ...

  4. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[5]：调试 debug

    作者:Xuejie 原文链接:https://xuejie.space/2019_10_18_introduction_to_ckb_script_programming_debugging/ Ner ...

  5. 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[4]：在 CKB 上实现 WebAssembly

    作者:Xuejie 原文链接:https://xuejie.space/2019_10_09_introduction_to_ckb_script_programming_wasm_on_ckb/ N ...

  6. shell脚本编程之变量简介及脚本执行过程

    脚本变量简介 变量类型:字符型.数值型.真.假:事先确定数据的存放格式和长度: 变量存放在内存空间: 编译型语言,没有额外的处理逻辑,属于强类型语言: 脚本型语言,可以有解释器控制:所以,可以是弱类型 ...

  7. Shell脚本编程（一）：初识shell script

    Shell简介 Shell是一个命令解释器,它是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核 ...

  8. Python 脚本编程及国际化

    在前一篇博客文章 <使用 Python 编写脚本并发布> 中,我介绍了如何使用 Python 进行脚本编程,说实话这是我在尝试 Python 进行网站和网络编程之后首次使用 Python ...

  9. Bash脚本编程之算术运算

    简介 Bash所支持的算术运算和C语言是一样的,这里指的是操作符(operator)以及它们的优先级(precedence).结合性(associativity)和值,详见Shell Arithmet ...

随机推荐

  1. I.MX6 7" navigation bar as black bar

    /********************************************************************************* * I.MX6 7" n ...

  2. window XP下 php5.5+mysql+apache2+phpmyadmin安装

    学了将近大半年的php了,还没有装过独立的php环境,一直用的集成的.记得刚学时,一头雾水,不知改怎么搭配环境,就觉得特别复杂,各种看不懂,今天还是自己在XP环境下搭配了一个. 首先,下载php5.5 ...

  3. UT源码+105032014070

    设计三角形问题的程序 输入三个整数a.b.c,分别作为三角形的三条边,现通过程序判断由三条边构成的三角形的类型为等边三角形.等腰三角形.一般三角形(特殊的还有直角三角形),以及不构成三角形.(等腰直角 ...

  4. python3.5 安装 numpy1.14.4

    AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) WIN32 import pip print(pi ...

  5. 【idea】Error:java: Compilation failed: internal java compiler error 解决办法

    报错信息: 报错原因: 项目中Java版本不一致,可以查看项目中的jdk配置 1.查看项目的jdk(Ctrl+Alt+shift+S) File ->Project Structure-> ...

  6. Oracle Client 10g (instantclient) 精简版安装

    今天遇到个软件要求安装oracle client端,于是考虑装精简版本的,就从http://www.oracle.com/technology/software/tech/oci/instantcli ...

  7. python 内置方法的时间复杂度

    好文,非常值得参考 http://www.orangecube.net/python-time-complexity

  8. Django Admin定制

    Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.contrib.contenttyp ...

  9. 事务的ACID和四个隔离级别

    在实际的业务场景中,并发读写引出了和事务控制的需求.优秀的事务处理能力是关系型数据库(特别是oracle等商用RDBMS)相对于正当风口的NoSQL数据库的一大亮点.但这也从另一方面说明了事务控制的复 ...

  10. Java 迭代器 Iterator

    迭代器模式 迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 迭代器模式属于行 ...