网络上另一种向量图形 SVG --- 可变式向量图形
(原文地址：http://home.kimo.com.tw/citybjc/2002/10/19/20021019.html)
专有名词(先背下来吧)：
W3C 全球信息网协会
SVG 可变式向量图形
XML 延伸标记语言
CSS 串接式样式表
DOM 文件对象模型
MathML 数学标记语言
Namespace 名称空间
RDF 资源描述架构
SMIL 同步多媒体整合语言
前言：
网络上除了位图之外，也有向量图形，位图与向量图形各有各的优点。这篇文章为你介绍一种可在网络上使用的向量图形--可变式向量图形。
可变式向量图形：
可变式向量图形是延伸标记语言的一种应用，它可以在网络上显示向量图形。而可变式向量图形定义三种三种图形对象：第一种就是向量图形(长方形、圆形、三角形、多边形…等)、第二种是影像(也就是位图形)、第三种是文字(可对文字做特效且有搜寻的能力)。并有档案小、动画、样式功能以及和使用者互动的能力。
非官方版的 Mozilla 浏览器：
如果读者是使用 Netscape 浏览器或是官方版本的 Mozilla 浏览器看可变式向量图形或许会有问题，这时需下载非官方版本的 Mozilla 浏览器。请到 http://www.croczilla.com/svg/ 下载非官方版本的 Mozilla 浏览器。
结合串接式样式表的功能：
可变式向量图形的一大功能是支持串接式样式表，这可以方便管理图形的样式。例如，用可变式向量图形绘制车子的四个轮胎，由于四个轮胎或许是一样的，这时可以为这四个轮胎指定同一种样式，到时只要一改样式，四个轮胎都会改变。
结合文件对象模型的功能：
可变式向量图形的另外一大功能就是支持文件对象模型，除了可使用文件对象模型修改样式之外，最重要的是提供互动的能力。使用者可以动态改变样式，也能够动态改变可变式向量图形的元素(新增、移除、修改)进而改变可变式向量图形所绘制的图形。
结合其它全球信息网协会的标准：
可变式向量图形和其它向量图形最大的差别在于可以和全球信息网协会的许多标准紧密地结合在一起。例如，结合资源描述架构的功能即可对图形做一些描述(像是这图形是谁制作的，是画车子、椅子、还是桌子…等等)，结合多媒体整合语言的功能能让可变式向量图形提供更具交互式的效果，结合数学标记语言的功能即可以画数学符号也可以画几何图形…等等)。
范例：
Test.xml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html PUBLIC
3 "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
4 "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
5 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW">
6 <head>
7 <title>测试</title>
8 <style type="text/css">
9 #rect1 {fill:red}
10 #rect1:hover {stroke:blue;stroke-width:10px}
11 #text1 {fill:green;font-size:16pt}
12 </style>
13 <script type="text/javascript" version="1.5">
14 var rect1;
15 function Init()
16 {
17 rect1 = document.getElementById("rect1")
18 rect1.addEventListener("click",Go,false);
19 }
20 function Go()
21 {
22 rect1.setAttribute("x","50px");
23 rect1.setAttribute("y","100px");
24 }
25 </script>
26 </head>
27 <body onload="Init()">
28 <div>测试一下呦！</div>
29 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
30 <rect id="rect1" x="20px" y="20px" height="100px" width="100px"/>
31 <text id="text1" transform="rotate(15)" x="40px" y="50px">点我一下</text>
32 </svg>
33 </body>
34 </html>
解释：
1到4行：应该不需做多大的解释，XHTML1.1 + MathML2.0 + SVG1.1 所用的文件型态宣告。
5行：唯一需注意的是 xml:lang 表示这份文件是给 zh-TW 地区使用的。
9行：会把 rect1 所表示的方块涂成红色。
10行：当鼠标移到 rect1 方块上方时，会涂上10像素大小的蓝色边框。
11行：把text1 所表示的文字涂上绿色，并使得文字的大小为 16 点。
15到24行：是文件对象模型的用法，首先为 rect1 所表示的方块登记一个事件：当点选 rect1 方块时，执行Go()函数。而函数的功能是把方块从(20,20)移到(50,100)。
29行：svg 元素代表这是可变式向量图形，它的名称空间为 http://www.w3.org/2000/svg，这是一定要写上去的并且指定可变式向量图形的版本。
30行：在位置(20,20)处画上宽100高100的正方形。
31行：在位置(40,50)处画上文字"点我一下"并使得文字旋转15度。
看起来就像这样：
(图1：当在方块的上方按一下时，方块即会从(20,20)移到(50,100))。
Test1.svg(需装 Adobe 的 SVG Viewer 外挂程序)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
version="1.1">
<style type="text/css">
#rect1 {stroke-width:10px;stroke:red;opacity:0.7}
</style>
<defs>
<linearGradient id="gradient1">
<stop offset="5%" stop-color="green"/>
<stop offset="50%" stop-color="yellow"/>
<stop offset="90%" stop-color="pink"/>
</linearGradient>
</defs>
<a xlink:href="http://www.w3.org">
<rect id="rect1" fill="url(#gradient1)" x="30px" y="40px" height="100px" width="100px"/>
</a>
</svg>
看起像会像这样：
(图2：有渐层的色彩，并且点下一方块会连到全球信息网协会的首页)。
想知道更多吗？
对可变式向量图形充满好奇吗？这些列出一些有用的资源。
http://www.w3.org/Graphics/SVG 可变式向量图形的入口网页。
http://www.w3.org/TR/SVG11 可变式向量图形规格书。
http://www.w3.org/TR/xml-names11/ 名称空间规格书。
http://www.mozilla.org/projects/svg/ Mozilla 浏览器对于可变式向量图形的支持。
http://www.croczilla.com/svg/ 从这可以取得非官方版本的 Mozilla 浏览器。
http://www.w3.org/Style/CSS/ 串接式样式表入口网页。
http://www.w3.org/DOM/ 文件对象模型入口网页。
http://www.w3.org/Math/ 数学标记语言入口网页。
http://www.w3.org/TR/REC-rdf-syntax 资源描述架构规格书。
http://www.w3.org/AudioVideo/ 同步多媒体整合语言入口网页。
http://www.adobe.com/svg/ 可安装可变式向量图形的外挂程序。
[此贴子已经被admin于2006-1-22 20:42:28编辑过]
[返回] 计算机科学论坛 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 网络上另一种向量图形 SVG --- 可变式向量图形[推荐]
(订阅本版)
2006/1/22 15:39:00
新浪微博
网络上另一种向量图形 SVG --- 可变式向量图形[推荐]
