可伸缩向量图形介绍.doc

1、我应该学习这个教程吗？ 第 1 页（共 3 页）本教程辅助开发人员理解可伸缩向量图形（SVG）背后的概念以将它们作为静态文档或动态生成的内容创建。XML 经验不是必需的，但熟悉至少一种标记语言（如 HTML）是有用的。有关基本的 XML 信息，请参阅教程 Introduction to XML 。在本教程的结束部分的单个脚本编制示例中用到了 JavaScript，不过相当简单。本教程的内容 第 2 页（共 3 页）可伸缩向量图形（SVG）使得用文本指定出现在页面上的图像成为可能。例如，传统图形需要指定矩形的每一个像素，而 SVG 只要说明矩形存在，并指出它的大小、位置和其它属性即可。它的好处有

2、很多，包括轻松地从数据库信息生成图形（如图或图表）的能力，以及向图形添加动画和交互性的能力。本教程演示了构建 SVG 文档必需的概念，如基本形状、路径、文本和绘制模型，还有动画和脚本编制。关于作者 第 3 页（共 3 页）Nicholas Chase 曾参与了 Lucent Technologies、Sun Microsystems、Oracle 和 Tampa Bay Buccaneers 等公司的网站开发。Nick 曾经当过高中物理教师、低级放射性废物设施经理、在线科幻杂志编辑、多媒体工程师以及 Oracle 讲师。最近，他担任过位于美国佛罗里达州 Clearwater 的 Site Dy

3、namics Interactive Communications 的首席技术官，他还写了三本有关 Web 开发的书，包括 Java and XML From Scratch（Que ）。他喜欢倾听读者的意见，可以通过 与他联系。向量图形与光栅图形的比较 第 1 页（共 5 页）在万维网历史的大部分时间里，浏览器显示的图形都是光栅格式的。在光栅图像（如 GIF 或 JPEG 图像）中，文件包含图像中每个像素的颜色值。浏览器读取这些值并做出相应行动。它仅认识到单独的部分，而没有整体概念。总的说来，这一系统有其优势，例如忠实再现摄影图像的能力，但它在某些情形下显得不足。例如，尽管浏览器能以不同大

4、小显示一个图像，通常会产生锯齿边缘，在这些地方，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值。此外，光栅文件格式的二进制性质使得难以（尽管不是不可能）基于数据库信息动态地创建图像，并且动画最多也仅限于“翻动书本”类型的动画，即快速连续地显示单独图像。向量图形，通过指定为确定每个像素的值所需的 指令 而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器

5、只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。Web 上的向量图像 第 2 页（共 5 页）Web 上的第一个向量图像可能是虚拟现实标记语言（VRML）图像。VRML 寻求将 HTML 的简易性带到图像创建中来，然而尽管有一些示例给人以深刻的印象，但它的本来目的是为了 3D 造型，而且它太过复杂以至于从未真正流行起来。接着是 Macromedia Flash 的介入。Flash 电影是用 Macromedia 的 Flash 应用程序所创

6、建，它允许创建相当复杂的动画，并且将动画与声音和交互性绑定在一起。因为 Flash 文件主要包含有关如何创建图像的指令，所以它们比传统的 Web 电影小得多（例如 QuickTime 电影） 而且它们可以缩放。但是，Flash 文件仍然是二进制文件，这使得动态创建它们比较困难（尽管不是不可能）。而且对从浏览器可以进行的脚本编制有所限制。使用文本定义图像 第 3 页（共 5 页）可伸缩向量图形通过使用 XML 定义图像、动画和交互性解决了这些问题中的许多问题。浏览器读取（或者更准确地说，浏览器的插件读取）这些基于文本的指令，然后执行这些指令。例如，一个简单的 SVG 矩形图像可能看起来如下：这个

7、文档指示浏览器创建一个矩形，并提供属性信息，如位置（x, y）、大小（height, width）、颜色（fill, stroke）和线宽（stroke-width）。（全部文档在基本 SVG 文档中讨论。）动画和交互性 第 4 页（共 5 页）因为这一结构，SVG 非常适合于动画和交互性。要更改图形元素的大小、位置或颜色，脚本只要调整相应的属性即可。事实上，SVG 有为事件处理而专门设计的属性（很象 HTML），甚至还有特别适合于动画的元素。例如，下面这一文档创建一个在 8 秒期间沿一条特定路线来回移动并无限重复的棍状图形：因为这完全基于指令，所以一个不是艺术家的人（象本教程的作者）即使不能

8、创造真正的艺术，也可以创建基本的图形和动画。动态创建图形 第 5 页（共 5 页）SVG 基于文本的性质也允许轻松地“ 实时”创建图形，因为生成图形只不过是将正确的值输出到页面而已。例如，正象 Java servlet、ASP 页面或 CGI 脚本能从数据库输出数值一样，SVG 可以输出图表或图。下面的图像显示了一个既含有 HTML 表中的纯文本数据又含有 SVG 版本数据的 HTML 页面：创建这个 SVG 的服务器端应用程序和创建 HTML 表的一样，而且使用相同数据（缩放 1000 倍以适应页面）：Home pageProduct infoContact usTechnical supp

9、ort这只是 SVG 能力的一个示例而已。SVG 使创建动态图像就象创建动态 HTML 一样简单。另外，因为 SVG 基于 XML，所以可以用可扩展样式表语言（XSL）变换轻松地创建它。基本 SVG 文档 第 1 页（共 5 页）从本质上来说，SVG 文档是 XML 文档。这就是说 SVG 文档有某些基本属性： 所以的标记都有开始标记和结束标记，否则必须注明为空标记。空标记用反斜杠结束，如。 标记必须正确嵌套。 如果一个标记在另一个标记中开始，那么它也必须在那个标记中结束。例如，Hello there! 是正确的，但 Hello there! 不正确。 文档必须只有一个根。正如一个 元素包含了

10、一个 HTML 页面的所有内容一样，一个 元素也包含一个 SVG 文档的所有内容。 文档应该以 XML 声明开始。 文档应该包含一个 DOCTYPE 声明， 该声明指向一个允许元素的列表。SVG 1.0 文档的 DOCTYPE 声明是： All SVG documents should have a description在 HTML 页面上包含 SVG 第 2 页（共 5 页）SVG 文档本身就非常有用，但在目前（目前它仍处于开发阶段）将它们添加到 Web 页面会发挥它们最大的作用。将它们添加到 Web 页面也使得在浏览器中显示它们变得更容易；根据用户系统的文件名关联的设置情况，有些浏览器会

11、拒绝打开一个 *.svg 文件，但显示作为 Web 页面一部分的 SVG 图像将不会有问题。将 SVG 图像添加到 HTML 页面很简单：只要添加一个具有适当属性的元素即可：SVG DemonstrationSVG DemonstrationA page may have other code besides the SVG image.Using objects allows the browser to decide what to display.请特别注意标记上的 height 和 width 属性。如果没有指定它们，有些浏览器将不会正确显示图像。此外，浏览器在执行某些计算（最特别的是

12、 用 viewBox 缩放）会考虑这些值，因此，如果没有正确地指定它们（如简单地用大的数值显示可能出现的任何东西），它们可能会干扰图像的正确显示。基本 SVG 形状 第 3 页（共 5 页）SVG 定义了六种基本形状，这些基本形状和路径（在路径是什么？中讨论）一道，可以组合起来形成任何可能的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由 fill 和 stroke 属性确定。这些形状是：圆（circle）：显示一个圆心在指定点、半径为指定长度的标准的圆。 椭圆（ellipse）：显示中心在指定点、长轴和短轴半径为指定长度的椭圆。 矩形（rect）：显示左上角在指定点并且

13、高度和宽度为指定值的矩形（包括正方形）。也可以通过指定边角圆的 x 和 y 半径画成圆角矩形。 线（line）：显示两个坐标之间的连线。折线（polyline）：显示顶点在指定点的一组线。 多边形（polygon）：类似于 polyline，但增加了从最末点到第一点的连线，从而创建了一个闭合形状。 下面的示例演示了这些形状：Basic shapes添加文本 第 4 页（共 5 页）除了形状以外，SVG 图像还可以包含文本。SVG 给予设计人员和开发人员对文本的大量控制，可以获得很好的图形效果而不必借助失去真实纹理信息的图像(.gif 或.jpg)图像甚至 Flash 电影常常这么做）。SVG

14、的文本和字体能力在以添加文本开始的文本部分讨论，而现在重要的是要理解所有在传统 HTML 页面中通过级联样式表（Cascading Style Sheet）可以获得的效果，也都可以在 SVG 图像内的文本元素中得到。例如：Basic textWelcome to the world ofScalable Vector Graphics!渲染顺序 第 5 页（共 5 页）当组合多种不同元素时，正象 SVG 图像一样，重要的是牢记各项在页面上的放置顺序，因为这关系到谁“在上面” 出现。在一个 HTML 页面上，使用 z-index 属性来控制这一分层效果，而对于 SVG 图像，则严格按顺序放置各项

15、。每个后继层放置在那些已放置层的上面。如果指定一个元素没有填充色（使用 fill=”none”“），那么在它下面的各项会显现出来，就象您在这里看到的：Overlapping shapes请注意每个元素会覆盖在它之前出现的元素。定义可重用部件 第 1 页（共 5 页）通常在 SVG 图像的构建中，各部分或者是可重用的，或者不便于在图像主体内定义。在这些情况下，通常方便的做法是在文档的定义部分内（作为 元素的一部分）通过给这些部分指定以后可在图像主体中调用的标识来创建它们。例如，在前面一页中显示的图像有两只眼睛，每只眼睛边缘有一个眼镜镜片。这个文档可以在定义部分中定义一个镜片，然后在文档中调用它两

16、次，而不是创建这个镜片两次（如下一页所示）。类似地，眼睛本身可以包含渐变（gradient），也应该定义这个渐变供以后引用。（在渐变中有更详细的介绍。）Referenced items. . . 将定义的项作为属性使用 第 2 页（共 5 页）如前一页中定义的多边形和渐变，预定义项的实际用法通常有两种形式。在这两种形式下，定义的项都通过其本地 URL（或 URI）引用。象 HTML 页面一样，id 属性创建了文档中的一个引用点。举例说来，这意味着 URI #irisGradient 引用标识为 irisGradient 的文档部分（或渐变定义）。即：可以从圆元素的 fill 属性内部引用它。请

17、注意 url() 函数的使用。最终代码在本节最后一页显示。请注意渐变现在用于眼睛的虹膜：将定义的项作为元素使用 第 3 页（共 5 页）引用预定义项的第二种方法是通过用 元素将它们链接到文档。例如：使用定义中提供的坐标将多边形放置在页面上。在这里有两个重要事项要强调。首先，请注意 xlink 名称空间的使用。尽管大多数查看器没有它也将正确显示这一项，但为了保持一致，xlink 名称空间应该在元素上定义，如下一页所示。其次，请注意元素在以这种方式使用时成为了一个可以拥有自己坐标系统的容器。坐标系统在坐标系统和初始观察口（viewport） 一节中讨论，不过您可以看到一个具体的示例：第二个镜片最初

18、用初始坐标 (190, 50) 创建，也就是相对第一个镜片偏移 125 个像素。而元素 在其原始位置创建第二个镜片，因为它相对于它的“容器”偏移了 125 像素。编组元素 第 4 页（共 5 页）最后，SVG 不仅仅可以定义单个元素，这一点或许可以从前面讨论的元素猜测出来。为兼顾可读性和方便性，将元素安排在一组中通常是个好办法。针对这一目的，SVG 提供 元素，它创建一个可以将元素置于其中的容器。这个容器可以用来标识元素，或提供一个公共属性（本地定义的属性将会覆盖公共属性）。例如代码. . . . .创建一个所有笔划都是 3 个像素宽的眼睛（因为没有元素定义笔划宽度），而除了外边框笔划外所有笔

19、划都是红色（因为椭圆定义了笔划颜色）。组成整体 第 5 页（共 5 页）最终的文档显示各部分是如何添加的：Reusing items请注意可重用元素也允许每次使用不同的属性值，正如上面虹膜的例子中的填充属性所示。笔划与填充 第 1 页（共 5 页）整个教程到目前为止，示例已经演示了围绕对象的笔划或线以及对象内部区域的填充。这些属性实际上还有子属性，也可以设置子属性来创建不同的效果。这些属性包括：fill：该属性指定用来填充对象内部区域的颜料。大多数情况下，该属性只是一种颜色，但它也可以是渐变或图案（会在图案中介绍） 。这个值通常是关键字、颜色说明或指向预定义元素的 URI。 fill-opac

20、ity：该属性指定元素的透明性。值的范围从完全透明（0）到完全不透明（1） 。 stroke：该属性指定元素外边框的外观。象 fill 一样，它引用颜料，尽管通常将它指定为一种简单颜色。 stroke-width：该属性指定笔划线的宽度。 stroke-linecap：该属性确定线末端的形状，可取的值有粗端（缺省值） 、圆和正方形。 stroke-linejoin：该属性确定对象各角的外观。允许的值有直角（缺省值） 、圆和斜角，它如示例中所示将尖角的边缘“剪掉” 。 stroke-dasharray：该属性是一个整数系列（如 3、2、3、2、4、3、2 和 3） ，它允许对虚线中每一划的相对长

21、度进行控制。 stroke-opacity：类似于 fill-opacity，该属性确定元素笔划线的相对透明性。 您可以在下面看到这些属性的一些示例：Stroke and fill. . . . . .颜色 第 2 页（共 5 页）颜色对于 SVG 图像是极其重要的。单个颜色可以直接使用它们的 RGB 值指定，或者使用差不多 150 个颜色关键字中的一个来间接指定，该关键字也引用 RGB 值。RGB 值在 0 到 255 数值范围内指定一种颜色的红、绿、蓝成分的相对亮度。例如：ColorsColors can be specifiedby theirRGBvaluesor by keyword

22、s such aslightsteelblue,mediumseagreen,anddarkorchid.完整的颜色关键字列表是 SVG 建议书的第一部分，您可以在 http:/www.w3.org/TR/SVG/types.html#ColorKeywords 中找到渐变 第 3 页（共 5 页）正象您在前面的示例中看到的，渐变提供了将颜色混合在一起的能力。渐变有两种。对于每种情况，代码都指定沿着渐变向量的颜色“停止”或颜色点，渐变到这些点就成为某种颜色。例如，指定红色在 0% 停止，白色在 50% 停止而蓝色在 100% 停止的渐变将逐渐由红色变为白色再变为蓝色，白色在渐变向量的中心。可以

23、推断或者直接指定渐变向量。以线性渐变为例，假设它从要填充区域的左缘开始到右缘结束。可以用 x1、y1、x2 和 y2 属性更改这一向量。也可以（依照）使用 gradientTransform 属性对这一向量进行变换。以放射性渐变为例，渐变基于一个圆，可以用 cx、cy 和 r 属性调整外部圆（渐变向量终止的地方）的圆心和半径。可以使用 fx 和 fy 属性调整焦点（渐变向量起始的地方） 。考虑下面这些线性和放射性渐变的示例：Colors. . . . . . . . . . .图案 第 4 页（共 5 页）用图案填充对象在很多地方与用渐变填充类似。两种情况下，都定义填充然后从填充属性内部调用它

24、。定义图案与定义任何其它作为 SVG 图像一部分出现的对象相似。它有位置、高度和宽度，通常还有一个或多个包含的对象。位置是基于整个文档还是基于正在被填充的对象由 patternUnits 属性确定，该属性可以设置为 objectBoundingBox 或 userSpaceOnUse；这些属性分别设置基于对象和文档的坐标。与渐变相似，可以变换图案（使用 patternTransform 属性） 。请考虑下面的示例：Patterns滤镜 第 5 页（共 5 页）也许 SVG 最强大的功能之一就是给图像添加了滤镜效果。这些效果复制了昂贵的图形操作程序中的许多效果，如光照效果和高斯模糊。对这些滤镜的

25、完整讨论超出了本教程的范围，不过本页讨论了一些基本滤镜。对 SVG 图像的滤镜操作包括创建一系列滤镜原语操作，该系列中每个原语操作都有自己的目的。例如，偏移滤镜按指定信息将源图像左移或右移以及上移或下移。高斯模糊原语操作按要求对源图像进行模糊处理。源图像不必一定是实际的 SVG 图像。例如，它可以是前一个原语操作的结果。下面的代码将几个滤镜应用到前一页中显示的图案。Filters. . .首先，偏移滤镜将原始椭圆及其图案的 alpha 通道作为源（使用 in 属性）。alpha 通道由与图像中每个非白色像素对应的黑色像素组成，并且用 SourceAlpha 关键字指定。偏移原语操作完成处理然后

26、将结果输出到一个由 result 属性指定的缓冲区（本例中的缓冲区名为 offset ）。接下来，模糊原语操作接任。它将 in 参数指定的 offset 缓冲区的内容作为源。然后，它将其结果输出到 result 属性指定的名为 blur 的缓冲区。这时，滤镜仅由经过偏移和模糊的图像组成。如果滤镜操作到此为止，那么页面上只出现模糊处理的图像。合并原语操作取得 blur 缓冲区的内容然后将它与原始源图形合并，正如当 in 属性引用 SourceGraphic 关键字时所指定的那样。所有处理的结果是一幅具有阴影效果的原始图像：坐标系统和初始观察口（viewport） 第 1 页（共 3 页）元素在整

27、个教程中都是通过坐标定位的。现在是该讨论这些坐标所适应的系统的时候了。当首次访问文档时，用户代理（在大多数情况下，即浏览器）确定图像的观察口。观察口是文档实际可见的部分并且由一个坐标系统组成，该坐标系统以左上角的点（0，0）为原点，其正的 x 轴向右而正的 y 轴向下。坐标系统中的一个像素对应观察口中的一个像素。有几个操作可以创建新的坐标系统。变换（接下来介绍）在被变换元素内部创建新的坐标系统，不过可以通过向文档添加另一个元素来直接创建新的坐标系统。考虑下面的示例：具有相同 x 和 y 属性的同一元素在不同的位置显示，这是因为第二个元素实际上属于另一个坐标系统，它从第一个元素偏移 100 个像

28、素：Coordinates变换 第 2 页（共 3 页）执行变换改变了元素所在的坐标系统，改变了它的外观。变换可以用来以数种方式改变元素的外观：translate(x,y)：该变换按指定数量偏移元素。 scale(x, y)：该变换更改元素的大小。可以分别控制 x 和 y 方向上缩放量，但如果只指定一个值，那么它将用于两个方向。 rotate(n)：该变换按指定的角度旋转元素。 skewX(n)/ skewY(n) ：这两种变换根据适当的轴按指定的像素数量偏斜元素。也可以使用矩阵指定变换，不过这超出了本教程的范围。变换是累积的，并且既可以指定为单个变换属性的一部分也可以指定为嵌套元素的一部分，

29、如下所示：CoordinatesTransform!在这个示例中要注意的可能最重要的事就是正在变换的是实际坐标系统。对象本身实际上没有变换，但它所在的坐标系统中的更改使它看起来发生变化。考虑上面的“Transform!”文本。现在正在沿 y 方向将它平移负 250 个像素，因此显而易见文本应该消失，它会在观察口顶部以上显示。然而在平移发生前，坐标系统进行了 90 度旋转，所以负的 y 值实际上使文本向右移动了 250 个像素。用 viewBox 缩放 第 3 页（共 3 页）没有任何更改时，初始观察口指定一个大小，其左上方坐标为 0,0，右下方坐标为介于该大小值与 0,0 之间的像素数目。但有

30、时候期望的效果是按可用的大小（不管大小是多少）而不是按图像进行缩放。那就要用到 viewBox 属性了。viewBox 属性重新映射观察口，它指定将在观察口左上角和右下角出现的新值。请记住：当在 Web 页面上放置 SVG 图形时， 标记的尺寸决定观察口的大小。例如，如果眼睛和眼镜添加了 viewBox 属性，如下所示：ViewBox. . . 页面会在任何分配给该图像的框内显示图像，进行适当的缩放。因此下面的 Web 页面：SVG Demonstration以不同大小显示该图像三次：preserveAspectRatio 属性确定如何实现缩放。 none 值将使图像伸展以适应框，即使这样会引

31、起图像失真。xMinYMin 值（如上所示）将图像的最小 x 和 y 值与框的最小 x 和 y 值对齐。其它可能的值有 xMinYMid、xMinYMax、xMidYMin、xMidYMid（缺省值） 、xMidYMax、xMaxYMin、xMaxYMid 和 xMaxYMax。路径是什么？ 第 1 页（共 4 页）SVG 提供的预定义形状当然是有用的，但有时它们还不足以完成工作。特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建，第二，当动画或文本需要沿页面上的特定形状前进时。这就需要路径了。路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）

32、或闭合的（如多边形） ，并可以包含一条或多条线、曲线和线段。最基本的路径由几条线段组成。例如：A simple path上述代码根据提供的指令生成一个简单的多边形。这些指令如下所示：M 100 100 ：移至点 100, 100。 L 300 50 ：画一条线至点 300, 50。 L 300 250 ：画一条线至点 300, 250。 L 100 300 ：画一条线至点 100, 300。 Z ：通过将线画回到原始点闭合此形状。 （更具体地说，回到最近一条“move”命令所指定的点。 ） 最终结果显示如下：请注意这里显示的所有命令都是大写字母，这说明这些坐标是相对于整个坐标系统的绝对坐标。使

33、用小写字母命令则指明为相对坐标。因此命令 l 50 50 从当前点创建一条线至距当前点下方和右方各 50 像素的点，那一点可能在任何位置。其它简单的线命令包括作水平线的 H （或 h）和作垂直线的 V （或 v）。曲线 第 2 页（共 4 页）路径命令可以创建三种类型的曲线：椭圆曲线是椭圆的一部分，也称为弧。A （或 a）命令通过指定起点、终点、x 和 y 轴半径、旋度和方向来创建它们，如下所示。 三次贝塞尔曲线由一个起点、一个终点和两个将曲线“拖”向自己的控制点定义。C （或 c）命令（指定起点和终点）和 S （或 s）命令（假设这条曲线从最近的命令终止的地方继续）创建这些曲线。 二次贝塞尔

34、曲线与其三次贝塞尔曲线类似，不过仅包含一个控制点。Q（或 q）和 T（或 t）命令可以创建这些曲线。 下面的示例显示了一些样本弧，为了清楚除去了文本。弧命令的格式如下：A radiusX, radiusY rotation large arc flag, sweep flag endX, endY因此一个半径为 50 和 25，没有旋度, 使用椭圆长轴部分以及曲线的下段，在距起点右边 50 个像素和下方 25 个像素处终止的弧将使用：a50,25 0 1,0 50,25一些变体如下所示：Curved pathsLarge arc flag=1Sweep flag=0Rotation=0. . .