当前位置主页 > 资料库 > 前端教程 > SVG基础 | SVG defs元素、symbol元素和use元素

SVG基础 | SVG defs元素、symbol元素和use元素

06-13
SVG defs元素

SVG的<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
      <g>
          <rect x="100" y="100" width="100" height="100" />
          <circle cx="100" cy="100" r="100" />
      </g>
  </defs>
</svg>                            
                            

<defs>元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用<use>元素来引入它们。如下面的代码所示:

<svg xmlns="http://www.w3.org/2000/svg">  
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" /> 
</svg>                           
                            

要引用<g>元素,必须在<g>元素上设置一个ID,通过ID来引用它。<use>元素通过xlink:href属性来引入<g>元素。注意在ID前面要添加一个#

<use>元素中,通过xy属性来指定重用图形的显示位置。注意在<g>元素中的图形的定位点都是0,0,在使用<use>元素来引用它的时候,它的定位点被转换为<use>元素xy属性指定的位置。

下面是上面代码的返回结果:

上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个<use>元素的xy坐标的。

哪些元素可以被定义为defs中的元素呢?

你可以将下面的元素放入到<defs>元素中使用:

  • 任何图形元素,如:rectline
  • g
  • symbol
SVG symbol元素

SVG <symbol>元素用于定义可重复使用的符号。嵌入在<symbol>元素中的图形是不会被直接显示的,除非你使用<use>元素来引用它。

下面是一个使用<symbol>元素的简单例子:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" style="fill:#bf55ec;"/>
    </symbol>

    <use xlink:href="#shape2" x="50" y="25" />
</svg>                          
                            

<symbol>元素需要一个ID号,以便以被<use>元素引用。

一个<symbol>元素可以有preserveAspectRatioviewBox属性。而<g>元素不能拥有这些属性。因此相比于在<defs>元素中使用<g>的方式来复用图形,使用<symbol>元素也许是一个更好的选择。

SVG use元素

SVG <use>元素可以在SVG图像中多次重用一个预定义的SVG图形,包括<g>元素和<symbol>元素。被重用的图形可以在定义<defs>的内部(图形将不可见直到使用use来引用它)或外部。

下面是一个使用<use>元素的例子:

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />

</svg>                              
                            

上面的例子显示的是在<defs>元素中定义的<g>元素。

要引用<g>元素,必须给它一个ID号,通过ID号来引用它。

下面是上面代码的返回结果:

我们也可以引用不在<defs>元素中的图形。<use>元素可以引用SCG图像中的任何元素,只要这个元素有一个唯一的ID号,例如:

<svg width="500" height="110">

    <g id="shape2">
        <rect x="0" y="0" width="50" height="50" />
    </g>

    <use xlink:href="#shape2" x="200" y="50" />

</svg>                            
                          

这个例子在<g>元素中定义了一个<rect>元素。然后通过<use>元素来引用这个<g>元素。它返回的结果如下面所示:

注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在<defs><symbol>元素中。所以它是可见的。

你可以为引用的图形设置CSS样式。你可以在<use>元素中使用style属性来为复用的图形设置它的样式。例如:

<svg width="500" height="110">

  <g id="shape3">
      <rect x="0" y="0" width="50" height="50" />
  </g>

  <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
  <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>

</svg>                            
                          

注意上面的代码中,原始的图形并没有设置样式,它将是默认的样式(黑色)。

返回SVG教程目录

相关阅读:

Previous:
上一篇:SVG基础 | SVG image 元素
Next:
下一篇:SVG基础 | SVG path 元素
返回顶部