SVG 入门教程(二) 定义和组

定义可重用部件

<nobr>第 1 页（共5 页）</nobr>

通常在 SVG 图像的构建中，各部分或者是可重用的，或者不便于在图像主体内定义。在这些情况下，通常方便的做法是在文档的定义部分内（作为 元素的一部分）通过给这些部分指定以后可在图像主体中调用的标识来创建它们。

例如，在前面一页中显示的图像有两只眼睛，每只眼睛边缘有一个眼镜镜片。这个文档可以在定义部分中定义一个镜片，然后在文档中调用它两次，而不是创建这个镜片两次（如下一页所示）。类似地，眼睛本身可以包含渐变（gradient），也应该定义这个渐变供以后引用。（在渐变中有更详细的介绍。） 

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  
5.      
6.   <desc>Referenced itemsdesc>  
7.   <defs>  
8.   
9.     <polygon id="lens" points="65,50 185,50 185,75, 150,100    
10.                                           100,100 65,75"   
11.              fill="none" stroke="purple" stroke-width="4"/>  
12.         
13.      <radialGradient id="irisGradient">  
14.         <stop offset="25%" stop-color="green" />  
15.         <stop offset="100%" stop-color="dodgerblue" />  
16.      radialGradient>  
17.   
18.   defs>  
19.      
20.   <g>  
21. . . .               
22.   
23.   

 

将定义的项作为属性使用

<nobr>第 2 页（共5 页）</nobr>

如前一页中定义的多边形和渐变，预定义项的实际用法通常有两种形式。

在这两种形式下，定义的项都通过其本地 URL（或 URI）引用。象 HTML 页面一样，id 属性创建了文档中的一个引用点。举例说来，这意味着 URI #irisGradient 引用标识为 irisGradient 的文档部分（或渐变定义）。即：可以从圆元素的 fill 属性内部引用它。

xml 代码

1. <circle cx="125" cy="50" r="25" fill="url(#irisGradient)"/>  

请注意 url() 函数的使用。

最终代码在本节最后一页显示。请注意渐变现在用于眼睛的虹膜：

 

将定义的项作为元素使用

<nobr>第 3 页（共5 页）</nobr>

引用预定义项的第二种方法是通过用 元素将它们链接到文档。例如：

xml 代码

1. <use xlink:href="#lens" />  

使用定义中提供的坐标将多边形放置在页面上。

在这里有两个重要事项要强调。首先，请注意 xlink 名称空间的使用。尽管大多数查看器没有它也将正确显示这一项，但为了保持一致，xlink 名称空间应该在 元素上定义，如下一页所示。

其次，请注意 元素在以这种方式使用时成为了一个可以拥有自己坐标系统的容器。坐标系统在坐标系统和初始观察口（viewport） 一节中讨论，不过您可以看到一个具体的示例：第二个镜片最初用初始坐标 (190, 50) 创建，也就是相对第一个镜片偏移 125 个像素。而元素

xml 代码

1. <use xlink:href="#lens" x="125"/>  

在其原始位置创建第二个镜片，因为它相对于它的“容器”偏移了 125 像素。

编组元素	<nobr>第 4 页（共5 页）</nobr>

最后，SVG 不仅仅可以定义单个元素，这一点或许可以从前面讨论的 <radialgradient></radialgradient>元素猜测出来。

为兼顾可读性和方便性，将元素安排在一组中通常是个好办法。针对这一目的，SVG 提供 元素，它创建一个可以将元素置于其中的容器。这个容器可以用来标识元素，或提供一个公共属性（本地定义的属性将会覆盖公共属性）。例如代码

xml 代码

1. . . .   
2.     <g stroke="red" stroke-width="3">  
3.       <ellipse cx="125" cy="50" rx="50" ry="25"    
4.                            fill="none" stroke="black" />  
5.       <circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />  
6.       <circle cx="125" cy="50" r="10" fill="black" />  
7.     g>  
8. . . .   

创建一个所有笔划都是 3 个像素宽的眼睛（因为没有元素定义笔划宽度），而除了外边框笔划外所有笔划都是红色（因为椭圆定义了笔划颜色）。

 

组成整体	<nobr>第 5 页（共5 页）</nobr>

最终的文档显示各部分是如何添加的：

xml 代码

1. xml version="1.0"?>  
3.   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">  
4. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"  
5.                       xmlns:xlink="http://www.w3.org/1999/xlink">  
6.      
7.   <desc>Reusing itemsdesc>  
8.   <defs>  
9.   
10.      <polygon id="lens" points="65,50 185,50 185,75, 150,100    
11.                                           100,100 65,75"   
12.              fill="none" stroke="purple" stroke-width="4"/>  
13.         
14.      <radialGradient id="irisGradient">  
15.         <stop offset="25%" stop-color="green" />  
16.         <stop offset="100%" stop-color="dodgerblue" />  
17.      radialGradient>  
18.         
19.      <g id="eye">  
20.         <ellipse cy="50" rx="50" ry="25"    
21.                            fill="none" stroke="black"/>  
22.         <circle cy="50" r="25"/>  
23.         <circle cy="50" r="10" fill="black"/>  
24.      g>  
25.   
26.   defs>  
27.      
28.   <g>  
29.   
30.     <use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>  
31.     <use xlink:href="#eye" x="250" fill="dodgerblue"/>         
32.          
33.     <use xlink:href="#lens"/>  
34.     <use xlink:href="#lens" x="125"/>  
35.                     
36.     <line x1="65" y1="50" x2="310" y2="50"    
37.                           stroke="plum" stroke-width="2"/>               
38.   
39.   g>  
40. svg>  

请注意可重用元素也允许每次使用不同的属性值，正如上面虹膜的例子中的填充属性所示。