以文本方式查看主题

-  计算机科学论坛  (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=13493)

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

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

</body>

</html>

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

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

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

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


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

--  
谢了.
--  作者：henrybenben
--  发布时间：4/13/2005 9:22:00 PM

--  
thanks:)
--  作者：ljb622
--  发布时间：4/27/2005 5:46:00 PM

--  
不知道你是否知道如果用C++语言作为脚本，实现某个操作例如点击鼠标右键显示一些内容，是否能实现。谢谢。
--  作者：zzzzzz2
--  发布时间：5/11/2005 12:48:00 PM

--  
有C＋＋ 的脚本语言吗？我怎么没有听说过啊？

现在在Web中使用Javascript已经是大势所趋了，VBScript在Web上比JavaScript少。

--  作者：suming
--  发布时间：5/13/2005 4:26:00 PM

--  
试了，弹出的框框说对象错误。没说那句：you had clicked the green rect
这到底是咋回事啊？
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 45.898ms