软件工程

本类阅读TOP10

·PHP4 + MYSQL + APACHE 在 WIN 系统下的安装、配置
·Linux 入门常用命令(1)
·Linux 入门常用命令(2)
·使用 DCPROMO/FORCEREMOVAL 命令强制将 Active Directory 域控制器降级
·DirectShow学习(八): CBaseRender类及相应Pin类的源代码分析
·基于ICE方式SIP信令穿透Symmetric NAT技术研究
·Windows 2003网络负载均衡的实现
·一网打尽Win十四种系统故障解决方法
·数百种 Windows 软件的免费替代品列表
·收藏---行百里半九十

分类导航
VC语言Delphi
VB语言ASP
PerlJava
Script数据库
其他语言游戏开发
文件格式网站制作
软件工程.NET开发
SVG脚本编程介绍(一)

作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站

Svg脚本编程简介(一)

本文主要介绍SVG的脚本编程,并分别给出放大、缩小,查询,鼠标事件等实例。

一、           SVG简介

SVG,全称为Scalable Vector Graphics(可伸缩矢量图形)。它是W3C制定的、用矢量描述图形的XML应用标准。它有着许多的优点,比如可扩充性(scalable),动态的,交互性强。SVG支持无极放大,对SVG图片进行任意比例的放大都不会损害图片的显示(没有太多的失真),其他诸如BMPJPEG格式的图片都不支持无级放大。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=”<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文件中,这样的话也可以方便的实现SVGHTML的数据交换。例如下面的例子。

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="1.svg" height="200px" width="200px" type="image/svg+xml">

</body>

</html>

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

SVG支持的事件有很多,比较常用的有onclickonmousedownonmouseuponmouseoutonmousemoveonload等等。更多的事件请查看:

http://www.w3.org/TR/SVG/interact.html

(另一部分为http://www.csdn.net/Develop/read_article.asp?id=26677

 




相关文章

相关软件