突袭HTML5之SVG

的对象就可以显示，不在这个范围内的对象就不显示。具体判定点在不在范围内的算法由\属性指定。

对于图形对象，裁剪路径等于自己clip-path设置的裁剪路径与所有外层元素的裁剪路径(包括clip-path和overflow设置的裁剪路径)的并集。注意几点： 1.clipPath元素自身并不会从外层节点继承clipPath定义的裁剪路径。 2.clipPath元素自身可以设置clip-path属性。效果是两个路径的交集。 3.clipPath元素的子元素可以设置clip-path属性：效果是两个路径的并集。 4.空裁剪路径会裁掉元素内所有的内容。 下面看看几种重要的属性：

clipPathUnits = \默认值) | objectBoundingBox\ 这个属性定义了clipPath元素使用的坐标系统，这两个值我们都很熟悉了，分别是采用引用当前裁剪路径的元素的用户坐标系统和包围盒比例值。

clipPath元素从来不直接渲染，都是通过clip-path被引用，所以设置clipPath元素的display属性没有作用。

clip-path = “ | none inherit”

这个属性不用多说了，用于引用裁剪路径，这里需要注意的是，所有的容器元素，基本图形元素和clipPath元素都可以使用这个属性。

clip-rule = \默认值) | evenodd | inherit\

这个属性用于确定哪些点是属于裁剪路劲内部的点。对于简单的封闭图形，这个很好判定，但是对于复杂的内部有洞的图形，就有区别了。这个属性的取值与fill-rule的取值含义是一样的：

nonzero：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充。看下面的示例：

evenodd：这个值采用的算法是：从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数，个数为奇数则改点在图形内，需要填充；个数为偶数则点在图形外，不需要填充。看下图的示例：

clip-rule属性只能用于clipPath元素的内部图形元素。例如下面的设置是起作用的：

如果元素不在clipPath中是不起作用的。例如下面的设置是不起作用的：

最后看裁剪路径的一个小例子：

矩形只有左上角10*10的区域是可见的。

蒙板- mask元素

在SVG中，你可以为渲染的对象指定任何的图形元素或者g元素作为蒙板，来将渲染对象组合到背景中。

蒙板用mask元素定义，使用蒙板的时候只需要在对象的mask属性中引用蒙板就可以了。

mask元素可以包含任何的图形元素和容器元素(例如g)。

蒙板的效果其实大家也比较清楚，基本就是根据蒙板中每个点的颜色和透明度计算出一个最终的透明度，然后在渲染对象的时候，在对象上面罩上这个带有不同透明度的蒙板层，体现出蒙板的遮挡效果。对于渲染对象来说，只有在蒙版内的部分会按照蒙板上点的透明度来渲染，不在蒙板内的部分不显示。看下面的例子：

xmlns=\ xmlns:xlink=\xlink\

font-family=\ font-size=\ text-anchor=\ > Masked text

效果如下图所示：

大家可以试着将上面mask元素中的rect元素的width改成500，你会看到Text的一部分不显示了，这就是因为那部分已经超出蒙板的范围了。这里其实也看到了，上面的裁剪路径只不过是一种特殊的蒙板(每个点的透明度要么是0，要么是1)。 蒙板的定义和使用已经介绍了，下面看几个重要的属性：

maskUnits = \默认值)\ 定义了mask元素中坐标(x,y)和长度(width,height)的坐标系统：使用引用该蒙板的元素的用户坐标系，或者是使用相对于引用蒙板的元素的包围盒的相对值。这个值的含义与前面章节中的单位含义是相同的。

maskContentUnits = \默认值) | objectBoundingBox\ 定义了mask元素中子元素的坐标系统。 x, y, width, height

定义了蒙板的位置和大小，在默认的objectBoundingBox坐标下，默认值分别为-10%,-10%,120%,120%。

此外要注意：蒙板不会直接渲染，只会在引用的地方起作用，所以display,opacity等属性对于mask元素来说都是不起作用的。 突袭HTML5之SVG 2D入门10 - 滤镜

滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。

滤镜用filter元素定义；需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。

滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行一个基本的图形操作，并产生图形输出。大多数的原子操作生成的结果基本都是一个RGBA图片。每个原子操作的输入既可以是源图形，也可以使其他原子操作的结果。所以引用滤镜效果的过程就是在源图形上应用相关的滤镜原子操作，最后生成一个新的图形并渲染。

当在容器上(例如g元素)使用filter属性的时候，滤镜效果会应用到容器中的所有元素。但是容器中的元素并不会直接渲染到屏幕，而是会被暂时存储起来。然后，图形命令会被当做处理引用的filter元素的过程的一部分被执行，这个时候才会去渲染。这是通过使用SourceGraphic和SourceAlpha来指定的。下面的第二个例子中的第三种情况会演示这

种效果。

有些滤镜效果会生成一些没有定义的像素点，这些点会被处理成透明效果。 先来看一个例子：

采用各种滤镜效果实现一副图形的3D的光照效果。

d=\ />

d=\ />

突袭HTML5之SVG 2D入门1 - SVG综述 位图与矢量图

以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针对位图进行动画，最多也仅限于生成“翻动书本”类型的动画，即快速连续地显示单独图像。

矢量图通过指定为确定每个像素的值所需的指令而不是指定这些值本身，克服了这些困难中的一部分。例如，向量图形不再为一个直径一英寸的圆提供像素值，而是告诉浏览器创建一个直径一英寸的圆，然后让浏览器（或插件）做其余事情。这消除了光栅图形的许多限制；使用向量图形，浏览器只要知道它必须画一个圆。如果图像需要以正常大小的三倍来显示，那么浏览器只要按正确的大小画圆而不必执行光栅图像通常的插入法。类似地，浏览器接收的指令可以更容易地与外部信息源（如应用程序和数据库）绑定，要对图像制作动画，浏览器只要接收有关如何操纵属性（如半径或颜色）的指令即可。

HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。

SVG概述

可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。 可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。

SVG绘图是交互式和动态的。 例如，可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件，动态创建和修改都比较困难。而SVG是文本文件，动态操作是相当容易的。而且，SVG直接提供了完成动画的相关元素，操作起来非常方便。 SVG与其他Web标准兼容，并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方(这里注意，SVG内部也是用一个类似的canvas这样的东西来展示SVG图形，到后面你会发现很多特性和HTML5的canvas还有点像；文中如果没明确说明是SVG的canvas的话，都代指HTML5中的canvas元素)。因而，可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。 虽然SVG的渲染速度比不上canvas元素，但是胜在DOM操作很灵活，这个优势完全可以弥补速度上的劣势。

SVG既可以说是一种协议，也可以说是一门语言；既是HTML的一个标准元素，也是一种图片格式。

SVG并不是HTML5中的东西，但是也算页面时兴的技术之一，姑且也放到这个专题下了。

SVG与其它图片格式的比较

SVG与其它的图片格式相比，有很多优点(很多优点来源于矢量图的优点)： ? SVG文件是纯粹的XML， 可被非常多的工具读取和修改(比如记事本)。 ? SVG 与JPEG 和GIF图像比起来，尺寸更小，且可压缩性更强。

? SVG 是可伸缩的，可在图像质量不下降的情况下被放大，可在任何的分辨率下被高质量地打印。

? SVG 图像中的文本是可选的，同时也是可搜索的(很适合制作地图)。 ? SVG 可以与 Java 技术一起运行。 ? SVG 是开放的标准。

SVG与Flash的比较

SVG 的主要竞争者是Flash。与Flash相比，SVG 最大的优势是它与其他标准(比如XSL和DOM)相兼容，操作方便，而Flash则是未开源的私有技术。其它的比如存储的格式，动态生成图形等方面，SVG也占有很大的优势。

SVG的呈现方式

关于支持HTML5与SVG的浏览器不是这里讨论的重点，基本上装上最新的Chrome或者FireFox浏览器就差不多了(IE用户请装IE9就对了，至于IE9之前的版本，需要装SVG的插件，这里就直接略过了)。对于直接支持SVG的浏览器，SVG主要采用两面两种呈现的方式。 内联到HTML

SVG是标准的HTML元素，直接写到HTML中就可以了，看下面的例子：

style=\

请注意开头的部分xml声明，与svg的命名空间xmlns、版本version等部分，主要是考虑兼容性的问题；这些部分在HTML5中基本都可以不用写了(写不写还是自己瞧着办吧)。

独立SVG文件

独立SVG指的是通过使用svg文件扩展名来提供向量图形文件格式。在浏览器中嵌入这个svg文件就可以使用了。

1.独立的SVG文件/页面，定义的模板基本就像下面的一样：

把这样的文本文件保存成以svg为扩展名的文件，例如sun.svg，这样的文件可以直接用浏览器打开浏览，也可以作为引用嵌入到别的页面中。 2.HTML引用外部的SVG文件。

使用object或者img元素嵌入svg图形就可以了，例如下面的小例子：

其实SVG也可以放在其他的XML文档中，也可以像其他的XML文档一样，使用XML相关的技术格式化和验证，这个不是重点，此处略去了。

SVG的渲染顺序

SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。

注意：SVG是以XML定义的，所以是大小写敏感的，这点与HTML不一样。 突袭HTML5之SVG 2D入门2 - 图形绘制 基本形状

SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：

100 145\

stroke=\ fill=\ stroke-width=\

stroke=\ fill=\ stroke-width=\

这段HTML显示的结果如下：

这个例子画了很多形状：正常的矩形，带圆角的矩形，圆形，椭圆形，直线，折线，多边形，还有路径。这些都属于基本的图形元素。虽然绘制一个图形有很多种方式，比如矩形可以用rect实现，也可以用path等实现，但是我们还是应该尽量保持SVG的内容短小精悍，易于阅读。

下面是每个形状的使用说明(这里只介绍控制图形形状和位置的基本属性，填充等属性放到后面总结)。 矩形 - rect元素

这个元素有6个控制位置和形状的属性，分别是： x：矩形左上角的坐标(用户坐标系)的x值。 y：矩形左上角的坐标(用户坐标系)的y值。

3. marker比较重要的属性：

markerUnits = \

这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统。这个属性有2个值可选，第一个值strokeWidth是默认值，代表属性

markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。

例如上面的例子中，marker元素的width是400,height是300，不过千万不要混淆了，mark元素中的path使用的坐标是viewBox设置的新的用户坐标系。

该属性另外一个取值userSpaceOnUse，代表属性markerWidth,markerHeight和marker的内容使用引用该marker的图形元素的坐标系统。

refX,refY：定义了引用的点与marker对齐的位置坐标。例如上面的例子中，引用的点是终点，要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。

markerWidth,markerHeight：marker视窗的宽和高，这个很好理解。 orient：定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。 auto代表x轴正方向按照下列规则旋转：

a. 如果marker所在的点只属于一个path，则marker的x轴正向与path走向相同。参看上面例子。

b. 如果marker所在的点属于两个不同的path，则marker的x轴正向与两个path的夹角的角等分线走向一致。 4. 图形元素的marker属性

图形元素要引用一个marker则需要使用相关的属性，主要是这3个：

marker-start(把引用的marker放到起点), marker-mid(把引用的marker放到除起点和终点外的所有点), marker-end(把引用的marker放到终点)。这3个属性的取值可能是none(代表不引用marker),marker的引用(引用某marker)，inherit(这个不用多说了)。

从上面的例子中也可以看到marker的用法。

脚本与样式 - script元素与style元素

实际上，基本上所有的属性(对于所有元素，不仅是文本)都可以用CSS与一个元素关联，并且所有CSS属性都在SVG图像中可用。可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。对XML文件来说不应该解析样式表(因为它们偶尔包含会引起问题的字符)，因此需要将它们置于XML CDATA节。脚本也是同样的道理，需要放到XML CDATA节中。看下面的CSS例子：

values

,

再看脚本的例子：

stroke-width=\ stroke=\

条件处理 - switch元素

条件处理属性是能控制所在元素渲染与否的属性。基本上大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个：requiredFeatures,

requiredExtensions和systemLanguage。这些属性就是一组测试，都允许指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的)，默认值都为true。 SVG的switch元素提供了按指定条件渲染的能力。switch元素是一个容器元素，可以包含图形元素，解释性元素，动画元素，a,

foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子元素的条件处理属性，然后渲染满足自身条件的的第一个子元素，其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如use引用的元素)。简单的说，这3个属性会影响a, altGlyph, foreignObject, textPath, tref, tspan ,animate, animateColor, animateMotion,

animateTransform, set等元素，不会影响defs,cursor, mask, clipPath, pattern等元素(这些元素那么不是可渲染的，要么就是引用别的元素)。

注意：子元素的display和visibility属性值并不影响switch元素条件判断的结果。 条件处理属性的取值列表参看官方文档，这里就看一个小例子：

x= \ y= \ width= \ height= \ opacity= \6 \

fill= \ stroke= \ filter= \ />

fill= \ stroke= \ />

这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性)，如果不支持filter特性，就绘制下面的矩形。

其实更多的时候，用的比较多的属性是systemLanguage，就是文本的多语言处理能力。例如：

突袭HTML5之SVG 2D入门9 - 蒙板 SVG支持的蒙板

SVG支持多种蒙板特效，使用这些特性，我们可以做出很多很炫的效果。至于中文中把mask叫做\蒙板\还是\遮罩\就不去区分了，这里都叫做蒙板吧。 SVG支持的蒙板类型： 1. 裁剪路径(cliping path)

裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见，所有在裁剪路径外的图形都不可见。 2. 遮罩/蒙板(mask)

蒙板是一种容器，它定义了一组图形并将它们作为半透明的媒介，可以用来组合前景对象和背景。

裁剪路径和其他的蒙板一个重要的区别就是：裁剪路径是1位蒙板，也就是说裁剪路径覆盖的对象要么就是全透明(可见的，位于裁剪路径内部)，要么就是全不透明(不可见，位于裁剪路径外部)。而蒙板可以指定不同位置的透明度。

视窗的裁剪路径 - overflow和clip属性

HTML元素的overflow属性和clip属性共同设置了该元素对内容的剪裁行为。同样的，在SVG中，这2个属性还可以使用。

overflow = visible | hidden | scroll | auto | inherit

overflow属性定义了当元素的内容超过元素的边框的时候采取的行为。 这个属性可以用于能创建新视窗的元素

(svg,symbol,image,foreignObject),pattern和marker元素。这个属性的取值含义如下：

visible：显示所有内容，即使是内容已经在元素的边框外边，这个是默认值。 hidden：隐藏超出裁剪路径的内容。裁剪路径由clip属性指定。 scroll：采用滚动条的形式，呈现超出的内容。 auto：采用浏览器定义的行为，这个似乎不太可靠。

这个属性和CSS2中的同名属性基本相同，只不过在SVG中，有一些不同的处理过程：

1.overflow属性对于除了创建新视窗的元素

(svg,symbol,image,foreignObject),pattern和marker元素外的元素都没有效果。 2.裁剪路径与视窗是对应的，创建了新的视窗，就创建了新的裁剪路径。默认的裁剪路径就是视窗边界。

clip = | auto | inherit clip属性用于设置当前视窗的裁剪路径。 这个属性可以用于能创建新视窗的元素

(svg,symbol,image,foreignObject),pattern和marker元素。这个属性和CSS2中同名属性有一样的参数。auto代表裁剪路径与视窗边框是一致的。当使用图形作为参数时(设置裁剪矩形的top,right,bottom和left的值)， 可以使用用户坐标值(即不带单位的坐标)。例如：

P { clip: rect(5px, 10px, 10px, 5px); }

这里注意，默认情况下(overflow和clip都取默认值)，裁剪路径是与视窗的边框是一致的。当设置了viewBox和preserveAspectRatio以后，通常也需要把clip裁剪路径的四边映射成viewBox的四边，这样才能保证某些显示效果还是一样的(当然如果都是默认值，就不用设了)。

对象的裁剪路径 - clipPath元素

裁剪路径使用clipPath元素定义，然后使用clip-path属性引用。

clipPath可以包含path元素，text元素，基本的图形元素(circle等)和use元素。如果是use元素，则它必须是直接引用path,text或者基本图形元素，不能引用的是其他的元素。

注意裁剪路径只是一位的遮罩层，该路径是包含的所有的元素的并集。在这个集合中

从结果中，你可以直接看到同样尺寸的矩形，在不同的倾斜变换后，得到的位置和形状。这里注意矩形的起始位置都已经改变了，这是因为在新的坐标系统中，(30,30)已经在不同的位置了。 缩放 - scale

缩放对象由缩放变换完成，该变换接受2个参数，分别指定在水平和竖直上的缩放比例，如果第二个参数省略则与第一个参数取相同的值。看下面的例子：

ABC (scale)

ABC (scale)

变换矩阵 - matrix

学过图形学的都知道，所有的变换其实都是由矩阵表征的，所以上面的变换其实都可以用一个3*3矩阵去表示：

a c e b d f 0 0 1

由于只有6个值用到了，所以也简写成[a b c d e f]。把matrix(a,b,c,d,e,f)赋给transfrom就可以实施相应的变换。变换会把坐标和长度都转换成新的尺寸。上面各种变换对应的矩阵如下： 平移变换[1 0 1 0 tx ty]：

1 0 tx 0 1 ty 0 0 1

缩放变换[sx 0 0 sy 0 0]：

sx 0 0 0 sy 0 0 0 1

旋转变换[cos(a) sin(a) -sin(a) cos(a) 0 0]：

cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1

沿X轴的倾斜[1 0 tan(a) 1 0 0]：

1 tan(a) 0 0 1 0 0 0 1

沿Y轴的倾斜[1 tan(a) 0 1 0 0]：

1 1 0 tan(a) 1 0 0 0 1

变换本质

前面我们总结canvas的时候，我们知道各种变换都是作用在用户坐标系上的。在SVG中，所有的变换也都是针对两个坐标系(本质上都是\用户坐标系\的。当给容器对象或图形对象指定\属性，或者给\指定

\属性以后，SVG会根据当前的用户坐标系统进行变换，去创建新的用户坐标系，并作用于当前的对象以及它的子对象。该对象中指定的坐标和长度的单位不再是1:1的对应到外围的坐标系，而是随着变形，转换到新的用户坐标系中；这个新的用户坐标系是只作用于当前的元素及其子元素。 变换链

transform属性支持设置多个变换，这些变换只要中间用空格分开，然后一起放到属性中就可以了。执行效果跟按顺序独立执行这些变换是一样的。

上面的效果与下面的一样：

单位

最后说一下单位，任何坐标和长度都可以带和不带单位。 不带单位的情况

不带单位的值被认为带的是\用户单位\，就是当前用户坐标系的单位值。 带单位的情况

svg中相关单位与CSS中是一样的：em,ex,px,pt,pc,cm,mm和in。长度还可以使用\。

相对度量单位：em和ex也与CSS中一样，是相对于当前字体的font-size和x-height来说的。

绝对度量单位：一个px是等于一个\用户单位\的，也就是\与\是一样的。但是一个px是不是对应一个像素，那就看有没有进行过一些变换了。 其他的几个单位基本都是px的倍数：

1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。 如果最外层的SVG元素的width和height没有指定单位(也就是\用户单位\，则这些值会被认为单位是px。

这一篇比较拗口，其实只要记住“图形元素的坐标和长度指的是，经过视窗坐标系变换和用户坐标系变换双重变换后，新用户坐标系的坐标和长度”就可以了。 突袭HTML5之SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点 - SVG元素的重用。

组合 - g元素

g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对

这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子：

注意几点：

1. xmlns=\表明了整个svg元素默认的命名空间是svg。这个在无歧义的时候可以省略。这里由于svg文档是一个XML文档，XML命名空间的相关规则这里都是适用的。例如可以给svg显示的指定命名空间，给命名空间提供别名等。

2. g元素是可以嵌套的。

3. 组合起来的图形元素就和单个的元素一样，可以给id值，这样，需要的时候(例如动画和重用一组元素)只用引用这个id值就可以了。

4. 组合一组图形元素可以统一设置这组元素的相关属性(fill,stroke,transform等)，这也是使用组合的一种场景。

模板 - symbol元素

symbol元素用于定义图形模板(模板可以包含很多图形)，这个模板可以被use元素实例化。模板的功能与g元素很相似，都是提供一组图形对象，但是也有一些区别。与g元素不同的地方是：

1.symbol元素本身是不会被渲染的，只有symbol模板的实例会被渲染。

2.symbol元素可以拥有属性viewBox和preserveAspectRatio，这些允许symbol缩放图形元素。

从渲染角度来说，与symbol元素相似的元素是marker(定义箭头和标号)和pattern(定义颜色)元素；这些元素不会直接被渲染；他们的使用方式基本都是由use元素去实例化。正是这个原因，对于symbol来说，'display'属性是没有意义的。 下面这个修改过的代码显示了symbol的使用方式：

xmlns:xlink=\ version=\ Two groups, each of two rectangles

定义 - defs元素

SVG允许定义一组对象，然后重用这组对象(注意，不仅仅是图形对象)。最常见的例子如定义渐变色，然后再其他的图形对象中赋给fill属性。渐变色定义的时候是不会渲染的，所以这类型的对象可以放到任何地方。重用对于图形对象中也是经常存在的，而且我们也不希望定义的时候直接渲染，而是想在引用的地方渲染，这个可以用defs元素实现。 通常情况下，推荐的做法是：只要有可能，就把被引用的对象放到defs元素中。这些对象通常是：altGlyphDef,clipPath,cursor,filter,

marker,mask,pattern,linearGradient,radialGradient，symbol和图形对象等。把这些对象定义在defs元素中很容易理解，所以就提高了可访问性。

其实作为容器对象的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不过每个元素的特性可能少许不同：比如g元素是直接渲染的，symbol和defs不会直接渲染，symbol含有viewBox属性，会创建新的视窗。

通常都会给在defs中定义的元素赋予id属性，并在用到的地方直接使用。根据元素的不同，这些定义可以用到不同地方，比如下面的渐进色作为属性来使用了：

xmlns=\

Local URI references within ancestor's 'defs' element.

图形相关元素的定义可以用use元素链接到文档。例如：

xmlns=\xlink\

Example Use01 - Simple case of 'use' on a 'rect'

在这里请注意xlink名称空间的使用。尽管大多数查看器没有它也将正确显示这一项，但为了保持一致，xlink名称空间应该在元素上定义。

引用 - use元素

任何svg, symbol, g, 单个的图形元素和use元素本质上都可以作为模板对象被use元素引用(例如初始化)。use引用的图形内容会在指定的位置渲染。与image元素不同，

use元素不能引用整个文档。

use元素也有x, y, width和height属性，这些属性可以省略，如果不省略的话，会将被引用的图形内容坐标或长度映射到当前的用户坐标空间来。

use元素的作用过程就相当于把被引用的对象深拷贝一份到独立的非公开的DOM树中；这棵树的父节点是use元素。虽然是非公开的DOM节点，但是本质上还是DOM节点，所以被引用对象的所有属性值、动画、事件、CSS的相关设置等都会拷贝多来并都还是会起作用，而且这些节点也会继承use元素和use祖先的相关属性(注意引用元素是深拷贝，这些拷贝过来的元素与原来的元素已经无关系了，所以这里不会继承被引用元素祖先节点的属性)，如果这些节点本身有相关(CSS)属性，还会覆盖继承来的属性，这些与普通的DOM节点是一致的，所以对use元素使用\时要小心，并不一定会起作用。但是由于这部分节点是非公开的，在DOM操作中，也只能看到use元素，所以也只能操作到use元素。

从视觉效果来看，use元素更像是占位符，渲染完成后的视觉效果就和直接用被引用对象渲染是一样的：

1. use元素引用一个symbol元素 这种情况下，视觉效果就相当于： (1) 把use元素换成g元素；

(2) 把use的除x,y,width,height,xlink:href外的属性全部移到g元素；

(3) 把use的x,y属性变成translate(x,y)，追加到g元素的transform属性最后； (4) 把引用的symbol元素换成svg元素，这个svg元素会显式使用use元素的width和height属性(use元素没有这些属性则是100%)；

(5) 把引用的symbol元素的图形内容深拷贝到替换的svg中。 2. use元素引用一个svg元素 这种情况下，视觉效果就相当于： (1) 把use元素换成g元素；

(2) 把use的除x,y,width,height,xlink:href外的属性全部移到g元素；

(3) 把use的x,y属性变成translate(x,y)，追加到g元素的transform属性最后； (4) 把引用的svg元素包括内容拷贝过来，这个svg元素会显式使用use元素的width和height属性(use元素没有这些属性则使用原来的值)； 3. 其他情况

这些情况下的视觉效果就相当于： (1) 把use元素换成g元素；

(2) 把use的除x,y,width,height,xlink:href外的属性全部移到g元素；

(3) 把use的x,y属性变成translate(x,y)，追加到g元素的transform属性最后； (4) 把引用元素拷贝过来； 看下面例子的视觉效果：

xmlns=\xlink\

Example Use03 - 'use' with a 'transform' attribute

transform=\

下面的图和上面的图外观是一样的：

Example Use03-'use' with a 'transform' attribute

突袭HTML5之SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对SVG的文档结构中剩下的相关元素简单总结一下，然后继续向前领略SVG的其他特性。 SVG文档的元素基本可以分为以下几类：

?

动画元素：animate, animateColor, animateMotion, animateTransform, set；

? 解释元素：desc, metadata, title；

? ? ? ?

图形元素：circle, ellipse, line, path, polygon, polyline, rect； 结构元素：defs, g, svg, symbol, use； 渐变元素：linearGradient, radialGradient；

其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。

其中图形元素，渐变元素，文本，图像元素和组合等都介绍过了，下面介绍另外几个与结构相关的元素。

视窗 - svg元素

可以在svg元素中以任何顺序放置任何的其他元素，包括嵌套svg元素。 svg元素支持的属性常用的也就是

id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。

svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。svg元素就不多说了，完整的属性和事件列表参看后面的官方文档。

解释性元素 - desc元素与title元素

每个容器元素(可以包含其他容器元素或者图形元素的元素，例如：

a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素，这两个元素都是辅助性的元素，用于解释相关情境；它们的内容都是文本。当SVG文档被渲染的时候，这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大，title在有些实现中是作为提示信息出现的，所以通常title是放到父元素的第一个位置上。 典型的用法如下：

This is a bar chart which shows company sales by region.

通常，最外层的svg元素要配以title说明，这样程序可读性更好。

标记 - marker元素

标记定义了附加到一个或者多个顶点(path,line,polyline或者polygon的顶点)上的图形元素(箭头和多点标记)。箭头可以通过把一个标记附加到path,line或者polyline的起点或者终点上。多点标记可以把一个标记附加到path,line,polyline或者polygon的所有顶点上。

标记是由marker元素定义的，然后在path,line,polyline或者polygon中设置相关的属性(marker,marker-start,marker-mid,和marker-end)就可以了。看个例子：

viewBox=\ version=\ xmlns=\

viewBox=\ refX=\ refY=\ markerUnits=\

markerWidth=\ markerHeight=\ orient=\

Placing an arrowhead at the end of a path.

fill=\ stroke=\ stroke-width=\ marker-end=\ />

下面详细看看marker的相关知识：

1. marker是容器元素，可以存放任意顺序的图形元素，容器元素，动画，渐变元素等。 2. marker元素可以创建新的视窗：设置viewBox的值。

百度搜索“77cn”或“免费范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，免费范文网，提供经典小说综合文库突袭HTML5之SVG在线全文阅读。