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/>标签之前。