use

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

use 元素在 SVG 文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的 DOM 中，然后将其粘贴到 use 元素的位置，很像 HTML5 中的克隆模板元素。因为克隆的节点是不可见的，所以当使用 CSS 样式化一个 use 元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的 DOM 不能保证继承 CSS 属性，除非你显式设置使用 CSS 继承。

出于安全原因，一些浏览器可能在 use 元素上应用同源策略，还有可能拒绝载入 xlink:href 属性内的跨源 URI。

使用上下文

类别图形元素、图形引用元素、结构元素
允许的内容任意数量、任意顺序的下列元素：
动画元素
描述性元素

示例

xml
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style>
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>

  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

属性

全局属性

专有属性

DOM 接口

该元素实现了 SVGUseElement接口。

浏览器兼容性

BCD tables only load in the browser