2007-11-17

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


定义可重用部件 第 1 页（共5 页）


通常在 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.   

 


将定义的项作为属性使用 第 2 页（共5 页）


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

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

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

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

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

 

将定义的项作为元素使用 第 3 页（共5 页）


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

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

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

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

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

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

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

编组元素 第 4 页（共5 页）


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

为兼顾可读性和方便性，将元素安排在一组中通常是个好办法。针对这一目的，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 个像素宽的眼睛（因为没有元素定义笔划宽度），而除了外边框笔划外所有笔划都是红色（因为椭圆定义了笔划颜色）。

 

组成整体 第 5 页（共5 页）


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

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>  

请注意可重用元素也允许每次使用不同的属性值，正如上面虹膜的例子中的填充属性所示。
  • std2.rar (1.8 KB)
  • 描述:
  • 下载次数: 3
评论
发表评论

您还没有登录，请登录后发表评论

jacally
搜索本博客
我的相册
5225c084-f830-3bfb-89b4-e391c07b2221-thumb
flexlib6-1.jpg
共 27 张
最近加入圈子
存档
最新评论