<use>

示例

下面的示例展示了如何使用 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>

属性

href

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

xlink:href

需要被复制的元素或片段的 <IRI> 引用。如果同时存在 href 和 xlink:href ，则使用 href 所给的值。
值类型：<IRI>；默认值：无；动画性：是

x

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

y

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

width

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

height

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

使用说明

如果 use 引用的元素上已经定义了相应的属性，则大多数 use 元素上的属性将被忽略。（这与 CSS 样式属性在层叠中如何覆盖“先前”设置的属性有所不同）。只有在 use 元素上的 x、y、width、height 和 href 属性，若引用的元素已经定义了相应的属性，才会或可能产生一些效果，稍后会进行描述。然而，任何其他属性如果没有在引用的元素上设置，将应用于 use 元素。

由于克隆的节点不可导出，因此在使用 CSS 为 use 元素及其克隆的后代添加样式时必须小心。除非通过 CSS 继承显式请求，否则无法保证克隆的 DOM 会继承 CSS 属性。

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

使用上下文

规范

浏览器兼容性