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>标记一样。其一般格式为:
<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脚本编程简介的更多相关文章
- 【在 Nervos CKB 上做开发】Nervos CKB脚本编程简介[2]:脚本基础
CKB脚本编程简介[2]:脚本基础 原文作者:Xuejie 原文链接:Introduction to CKB Script Programming 2: Script 本文译者:Shooter,Jas ...
- 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[1]:验证模型
CKB 脚本编程简介[1]: 验证模型 本文作者:Xuejie 原文链接:Introduction to CKB Script Programming 1: Validation Model 本文译者 ...
- 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[3]:自定义代币
原文作者:Xuejie 原文链接:https://xuejie.space/2019_09_06_introduction_to_ckb_script_programming_udt/ Nervos ...
- 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[5]:调试 debug
作者:Xuejie 原文链接:https://xuejie.space/2019_10_18_introduction_to_ckb_script_programming_debugging/ Ner ...
- 【在 Nervos CKB 上做开发】Nervos CKB 脚本编程简介[4]:在 CKB 上实现 WebAssembly
作者:Xuejie 原文链接:https://xuejie.space/2019_10_09_introduction_to_ckb_script_programming_wasm_on_ckb/ N ...
- shell脚本编程之变量简介及脚本执行过程
脚本变量简介 变量类型:字符型.数值型.真.假:事先确定数据的存放格式和长度: 变量存放在内存空间: 编译型语言,没有额外的处理逻辑,属于强类型语言: 脚本型语言,可以有解释器控制:所以,可以是弱类型 ...
- Shell脚本编程(一):初识shell script
Shell简介 Shell是一个命令解释器,它是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核 ...
- Python 脚本编程及国际化
在前一篇博客文章 <使用 Python 编写脚本并发布> 中,我介绍了如何使用 Python 进行脚本编程,说实话这是我在尝试 Python 进行网站和网络编程之后首次使用 Python ...
- Bash脚本编程之算术运算
简介 Bash所支持的算术运算和C语言是一样的,这里指的是操作符(operator)以及它们的优先级(precedence).结合性(associativity)和值,详见Shell Arithmet ...
随机推荐
- Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader
前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...
- Python流程控制-while循环-for循环
写重复代码 是可耻的行为 -------------- 完美的分割线 -------------- 摘录自:http://www.runoob.com/python/python-loops.htm ...
- 前端打印日志到localStroge并导出
interface LogEntry { data: any time: Date } export class PersistantLog { //最大条数 maxEntries = 3000; i ...
- Linux下下载JDK
需要加特殊的前缀,不然无法下载文件 . 例如JDK8 U131 wget -c --header "Cookie: oraclelicense=accept-securebackup-coo ...
- MySql 中的 FIND_IN_SET 的使用和相关问题
MySql 中的 FIND_IN_SET 的使用和相关问题 QQ 群里有人讨论如果在 category_ids 中打开 12 的分类,而 category_ids 中的 ID 是以 逗号分开的. 使用 ...
- ccflow之相对路径
最近在使用集成CCFlow系统时,在项目中直接运行可以,但发布到项目时老是报找不到文件的错误,后跟踪发现 BP.WF.Dev2Interface.UI_Window_OneWork(this.FK_F ...
- selenium笔记2017
1,from time import sleep(先引入关键词) sleep(5) (就可以使用这个命令了) 可以停止页面5秒 1-1. 等待页面元素出现的时间(即没出现时,等待元素出现) ...
- poj 1930 Dead Fraction(循环小数化分数)
Dead Fraction Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 3478 Accepted: 1162 Des ...
- 面试总结之MISC(操作系统,网络,数学,软件开发,测试,工具,系统设计,算法)
操作系统 解释堆和栈的区别. 分配在堆的内存与分配在堆栈的内存有什么不同 分配在堆的内存要手动去释放 线程与进程的区别 多线程中栈与堆是公有的还是私有的 在多线程环境下,每个线程拥有一个栈和一个程序计 ...
- ueditor上传图片时目录创建失败的问题解决方法,不用那么麻烦,其实修改php/config.json这个配置文件里面的路径就行!!
ueditor的真实上传路径提示出来,我进行了如下步骤: 找到了编辑器的上传处理类 Uploader.class.php,大约110行的位置找到了上传失败的提示位置, 将 $this->stat ...