26.SVG-use元素.md

SVG use元素

---

• use示例
• defs元素外使用图形
• 设置CSS样式

SVG<use>元素在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>元素。这使得在被<use>元素引用之前，<g>元素都不可见。

在<g>元素可被引用前，必须通过id属性为其设置一个ID。<use>元素通过它的<xlink:href>属性引用<g>元素。注意在属性值ID前必须有一个#

<use>元素通过其x和y属性指定何处展示复用的图形。请注意，<g>元素中的图形位于0,0处。这么做是因为它们的位置由<use>元素指定。

最终图片如下：

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="50" y="50"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape" x="200" y="50"></use>

<circle cx="50" cy="50" r="5" style="fill:#0000ff;"></circle>
<circle cx="200" cy="50" r="5" style="fill:#0000ff;"></circle>

蓝色点不是例子的一部分，只是为了显示两个<use>元素的x和y位置。

defs元素外使用图形

只要图形有一个唯一的id属性，<use>元素可以在SVG图片中任何位置复用元素。示例如下：

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

这个例子定义了一个内部包含<rect>元素的<g>元素。然后通过<use>元素复用<g>元素（包含嵌套的<rect>元素）。

最终图片如下：

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

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#shape2" x="200" y="50"></use>

<circle cx="200" cy="50" r="5" style="fill:#0000ff;"></circle>

可以发现，原始图形和复用版都显示出来了。发生这样的情况，是因为复用的图形（<g>元素）未定义在<defs>元素或<symbol>元素内。因此其可见。

同样，蓝点表示<use>元素的坐标。

设置CSS样式

如果原始图形未设置CSS样式，你可以在复用其时设置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>

注意，元素图形上没有style属性。所以其使用默认样式（经典黑）渲染。