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中的和HTML中的类似，和和

类似。

    在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>

<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可以写在如下几个位置：标签之后；在中；在标签之前。