SVG 中使用 JavaScript

    作者:Flyingis

    SVG(Scalable Vector Graphics)是一种基于XML的语言，用来在Web中绘制矢量图形。当前，除了Mozilla 2.0外，没有一款浏览器在本质上支持SVG，都需要插件来显示SVG图形，著名的有Adobe公司和Corel公司的SVG插件。

    一个简单的SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink width="100%" height="100%">
<desc>
显示一个正方形和一个圆形
</desc>
<defs>
<rect id="myrect" width="150" height="150" fill="red" x="15" y="15" stroke="black"/>
<circle id="mycircle" r="75" fill="white" stroke="black" cx="150" cy="150"/>
</defs>
<use xlink:href="#myrect" />
<use xlink:href="#mycircle" />
</svg>

    为了更好的理解SVG中的标签，可以和HTML标签作个简单的比较，SVG中的<svg/>和HTML中的<html/>类似，<desc/>和<title/>类似，<g/>和<div/>类似。

    在SVG中可以使用JavaScript，当需要遵循一些规则：必须使用type属性；language属性是非法的；使用特殊XML字符时可以使用CDATA（SVG和CDATA都遵循XML规范）；xlink:href替换src。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink=http://www.w3.org/1999/xlink width="100%" height="100%">
<desc>
显示一个正方形和一个圆形
</desc>
<![CDATA[
  function comp(a, b) {
    if (a > b)
      alert("a is bigger than b");
    else
      alert("a is not bigger than b");
  }
]]>
<defs>
<rect id="myrect" width="150" height="150" fill="red" x="15" y="15" stroke="black"/>
<circle id="mycircle" r="75" fill="white" stroke="black" cx="150" cy="150"/>
</defs>
<use xlink:href="#myrect" />
<use xlink:href="#mycircle" />
</svg>

    在SVG中使用JavaScript可以写在如下几个位置：<desc/>标签之后；在<defs/>中；在<g/>标签之前。

Flyingis 2006-08-31 20:06 发表评论