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>元素中，通过x和y属性来指定重用图形的显示位置。注意在<g>元素中的图形的定位点都是0,0，在使用<use>元素来引用它的时候，它的定位点被转换为<use>元素x和y属性指定的位置。

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

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

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

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

任何图形元素，如：rect，line等
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>元素可以有preserveAspectRatio和viewBox属性。而<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>

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