最近评论
正在载入评论列表...
SVG是一种崭露头角的基于XML的语言，用于在Web上绘制矢量图形。矢量图形不同于光栅图形（位图），它们定义的是三角形、线段及它们之间的关系，而不只是定义图像的每个像素的颜色。这样生成的图像无论大小，看起来都是相同的。随着这种语言的日益流行，矢量图形程序（如Adobe Illustrator）已经开始加入SVG导出功能。
尽管目前没有浏览器内置支持SVG（虽然Mozilla 2.0将支持它），但许多公司（包括著名的Adobe和Corel）都在编写SVG插件，以便使大多数浏览器都能显示SVG图形。
介绍SVG这种语言不在本书的讨论范围内。不过，对该语言稍有理解有助于JavaScript的讨论。
下面是一个简单的SVG示例：
这个例子将在正方形的右下角画一个圆（如图5-2所示）。
注意，SVG文件的开头是XML序言（prolog）<?xml version="1.0"?>，声明该语言是基于XML的。接下来的SVG DTD是可有可无的，不过通常都会被加入。
最外层的标签是<svg/>，把该文件定义为SVG图像。特性width和height可被设置为任何值，包括百分数和像素，不过这里为简单起见，把它们设置为100%。注意声明了两个XML命名空间，一个用于SVG，一个用于XLink。XLink定义href这样的链接行为，将来的XHTML版本很可能支持它。目前，SVG带动了对XLink的基本支持。
图 5-2
接下来的标签是<desc/>，包含图像的说明。可把<desc/>标签看作HTML中的<title/>标签，它说明了图像中包含的内容，而不是如何在页面上显示图像。紧接着是<defs/>标签，定义图像中要使用的资源及形状。在这个例子中，定义了一个矩形和一个圆。除非专门用在真正的图像中，否则这些形状不会被显示。
<defs/>之后是<g/>标签，即group的缩写。标签<g/>很特殊，因为它是最外层的，从而封装了该可视图像。在最外层的<g/>标签内可多次使用<g/>标签（就像HTML中的<div/>），以构成形状组。
在这个例子中，有两个<use/>标签指向<defs/>段中的形状。<use/>标签的xlink:href特性指向形状的ID（前面有英镑符号#），从而把这个形状带到该可视图像中。<defs/>中定义的形状可用多个<use/>标签在图像中多次使用。SVG的这种能力使它成为基于XML的语言中代码重用的典范。
当然，SVG最令人兴奋的一点是对JavaScript的优秀支持，用JavaScript可以对SVG图像的各个部分进行操作。
SVG采用的<script/>标签与将JavaScript加入页面的<script/>标签相似。但这个<script/>标签不同于HTML中的<script/>标签：
q type特性是必需的。type特性可被设置为text/javascript或text/ecmascript，不过从技术上讲，前者才是正确的。
q 
language特性是不合法的。加入这个特性，SVG代码就会无效。
q 内嵌代码必须使用CDATA段。由于SVG是真正基于XML的语言，所以它能正确地支持CDATA段，因此内嵌代码使用特殊的XML字符时，必须使用CDATA段。
q 使用xlink:href代替src。在SVG中，<script/>标签中没有src特性，而是使用xlink:href特性说明要引用的外部文件。
例如：
这段代码中，SVG有两个正确的<script/>标签。第一个包含内嵌代码，被CDATA段包围着，因此使用特殊字符不会产生任何问题。第二个使用xlink:href特性引用外部文件。
由于SVG中不存在<head/>区，所以<script/>标签几乎可以放在任何位置。但是，通常它们放在以下地方：
q 紧接在<desc/>标签后；
q 在<defs/>标签中；
q 恰好位于最外层的<g/>标签前。
<script/>标签不能放在形状内部，如<recct/>或<circle/>，也不能放在滤光器、梯度或其他定义外观的标签内。
图书导读
