定义可重用部件 | <nobr>第 1 页(共5 页)</nobr> |
通常在 SVG 图像的构建中,各部分或者是可重用的,或者不便于在图像主体内定义。在这些情况下,通常方便的做法是在文档的定义部分内(作为 元素的一部分)通过给这些部分指定以后可在图像主体中调用的标识来创建它们。
例如,在前面一页中显示的图像有两只眼睛,每只眼睛边缘有一个眼镜镜片。这个文档可以在定义部分中定义一个镜片,然后在文档中调用它两次,而不是创建这个镜片两次(如下一页所示)。类似地,眼睛本身可以包含渐变(gradient),也应该定义这个渐变供以后引用。(在渐变中有更详细的介绍。)
- xml version="1.0"?>
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
- <desc>Referenced itemsdesc>
- <defs>
- <polygon id="lens" points="65,50 185,50 185,75, 150,100
- 100,100 65,75"
- fill="none" stroke="purple" stroke-width="4"/>
- <radialGradient id="irisGradient">
- <stop offset="25%" stop-color="green" />
- <stop offset="100%" stop-color="dodgerblue" />
- radialGradient>
- defs>
- <g>
- . . .
将定义的项作为属性使用 | <nobr>第 2 页(共5 页)</nobr> |
如前一页中定义的多边形和渐变,预定义项的实际用法通常有两种形式。
在这两种形式下,定义的项都通过其本地 URL(或 URI)引用。象 HTML 页面一样,id
属性创建了文档中的一个引用点。举例说来,这意味着 URI #irisGradient
引用标识为 irisGradient
的文档部分(或渐变定义)。即:可以从圆元素的 fill
属性内部引用它。
- <circle cx="125" cy="50" r="25" fill="url(#irisGradient)"/>
请注意 url()
函数的使用。
最终代码在本节最后一页显示。请注意渐变现在用于眼睛的虹膜:
将定义的项作为元素使用 | <nobr>第 3 页(共5 页)</nobr> |
引用预定义项的第二种方法是通过用 元素将它们链接到文档。例如:
- <use xlink:href="#lens" />
使用定义中提供的坐标将多边形放置在页面上。
在这里有两个重要事项要强调。首先,请注意 xlink
名称空间的使用。尽管大多数查看器没有它也将正确显示这一项,但为了保持一致,xlink
名称空间应该在 元素上定义,如下一页所示。
其次,请注意 元素在以这种方式使用时成为了一个可以拥有自己坐标系统的容器。坐标系统在坐标系统和初始观察口(viewport) 一节中讨论,不过您可以看到一个具体的示例:第二个镜片最初用初始坐标 (190, 50) 创建,也就是相对第一个镜片偏移 125 个像素。而元素
- <use xlink:href="#lens" x="125"/>
在其原始位置创建第二个镜片,因为它相对于它的“容器”偏移了 125 像素。
编组元素 | <nobr>第 4 页(共5 页)</nobr> |
最后,SVG 不仅仅可以定义单个元素,这一点或许可以从前面讨论的 <radialgradient></radialgradient>
元素猜测出来。
为兼顾可读性和方便性,将元素安排在一组中通常是个好办法。针对这一目的,SVG 提供 元素,它创建一个可以将元素置于其中的容器。这个容器可以用来标识元素,或提供一个公共属性(本地定义的属性将会覆盖公共属性)。例如代码
- . . .
- <g stroke="red" stroke-width="3">
- <ellipse cx="125" cy="50" rx="50" ry="25"
- fill="none" stroke="black" />
- <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
- <circle cx="125" cy="50" r="10" fill="black" />
- g>
- . . .
创建一个所有笔划都是 3 个像素宽的眼睛(因为没有元素定义笔划宽度),而除了外边框笔划外所有笔划都是红色(因为椭圆定义了笔划颜色)。
组成整体 | <nobr>第 5 页(共5 页)</nobr> |
最终的文档显示各部分是如何添加的:
- xml version="1.0"?>
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <desc>Reusing itemsdesc>
- <defs>
- <polygon id="lens" points="65,50 185,50 185,75, 150,100
- 100,100 65,75"
- fill="none" stroke="purple" stroke-width="4"/>
- <radialGradient id="irisGradient">
- <stop offset="25%" stop-color="green" />
- <stop offset="100%" stop-color="dodgerblue" />
- radialGradient>
- <g id="eye">
- <ellipse cy="50" rx="50" ry="25"
- fill="none" stroke="black"/>
- <circle cy="50" r="25"/>
- <circle cy="50" r="10" fill="black"/>
- g>
- defs>
- <g>
- <use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>
- <use xlink:href="#eye" x="250" fill="dodgerblue"/>
- <use xlink:href="#lens"/>
- <use xlink:href="#lens" x="125"/>
- <line x1="65" y1="50" x2="310" y2="50"
- stroke="plum" stroke-width="2"/>
- g>
- svg>
请注意可重用元素也允许每次使用不同的属性值,正如上面虹膜的例子中的填充属性所示。