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

jacally

浏览: 770124 次
性别:
来自: 广州

最近访客更多访客>>

331218027

z457412

raymond.chen

pengyl770587227

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XML

定义可重用部件

第 1 页（共5 页）

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

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

xml 代码

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>
. . .

将定义的项作为属性使用

第 2 页（共5 页）

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

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

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

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

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

将定义的项作为元素使用

第 3 页（共5 页）

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

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

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

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

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

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

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

编组元素

第 4 页（共5 页）

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

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

xml 代码
. . .   
    <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 个像素宽的眼睛（因为没有元素定义笔划宽度），而除了外边框笔划外所有笔划都是红色（因为椭圆定义了笔划颜色）。

组成整体

第 5 页（共5 页）

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

xml 代码
<!---->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>

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

std2.rar (1.8 KB)
下载次数: 19

分享到：

SVG 入门教程(三) 绘制 | SVG 入门教程(七) 动画与交互

2007-11-17 23:34
浏览 1802
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论