<use>

使用语境

属性

href

指向需要被复制的元素/片段的 URL。关于常见陷阱的详细信息，请参阅使用说明。
值类型：<URL>；默认值：无；可否动画：是

xlink:href 已弃用

一个指向需要被复制的元素/片段的 <IRI> 引用。如果 href 和 xlink:href 同时存在，将使用 href 属性的值。
值类型：<IRI>；默认值：无；可否动画：是

警告： 从 SVG 2 开始，xlink:href 属性已被废弃，推荐使用 href。更多信息请参见 xlink:href 页面。

x

应用于 <use> 元素的额外最终偏移变换的 x 坐标。
值类型：<coordinate>；默认值：0；可否动画：是

y

应用于 <use> 元素的额外最终偏移变换的 y 坐标。
值类型：<coordinate>；默认值：0；可否动画：是

width

<use> 元素的宽度。
值类型：<length>；默认值：0；可否动画：是

height

<use> 元素的高度。
值类型：<length>；默认值：0；可否动画：是

DOM 接口

该元素实现了 SVGUseElement 接口。

示例

下面的示例展示了如何使用 <use> 元素来绘制具有不同填充和描边颜色的圆。在最后一个圆中，stroke="red" 将被忽略，因为描边已经在 myCircle 上设置了。

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

用法说明

如果 <use> 所引用的元素上已经定义了相应的属性，那么 <use> 上的大多数属性都会被忽略。（这与 CSS 样式属性会覆盖层叠中“较早”设置的属性不同）。只有 <use> 元素上的 x、y、width、height 和 href 属性，在被引用元素已经定义了相应属性的情况下，可能会产生一些影响（将在后面描述）。然而，任何其他未在被引用元素上设置的属性都将应用于 <use> 元素。

由于克隆的节点不会被暴露出来，因此在使用 CSS 为 <use> 元素及其克隆的后代设置样式时必须小心。除非使用 CSS 继承显式请求，否则不保证 CSS 属性会被克隆的 DOM 继承。

出于安全原因，浏览器可能会对 <use> 元素应用同源策略，并可能拒绝加载 href 属性中的跨域 URL。目前没有为 <use> 元素设置跨域策略的已定义方法。

通过 <use> 从外部文件加载资源

你可以通过 <use> 元素从外部 SVG 文件加载节点，方法是指定文件路径，后跟一个指向要加载节点 id 的 URL 片段。

<svg>
  <use href="../assets/my-svg.svg#my-fragment"></use>
</svg>

在过去，URL 片段总是必需的，即使你只想加载整个 SVG 文档。在这种情况下，id 会被包含在 SVG 根元素上。

<svg xmlns="http://www.w3.org/2000/svg" id="my-fragment">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

然而，现代实现已经更新，如果你想加载整个外部文档，可以不带 URL 片段来引用它（并且 SVG 文档根元素上不再需要 id）。

<svg>
  <use href="../assets/my-svg.svg"></use>
</svg>

请查看浏览器兼容性表格以了解浏览器支持情况。

通过 <use> 从数据 URI 加载资源

出于安全原因，不推荐在 href 属性中使用数据 URI 加载资源。这适用于 <use href="data:..." 以及使用 set 或 setAttribute 方法设置 href 的情况。

同样，请查看浏览器兼容性表格以了解浏览器支持情况。

规范

浏览器兼容性