use

该<use>元素从SVG文档中获取节点，并将其复制到其他地方。效果与将节点深深地克隆到非暴露的DOM中，然后粘贴到use元素所在的位置，就像HTML5中的克隆模板元素一样。由于克隆的节点没有暴露，因此在使用CSS来设计一个use元素及其隐藏的后代时必须小心。除非使用CSS继承显式请求CSS属性，否则CSS属性不保证被隐藏的克隆的DOM 继承。

出于安全原因，一些浏览器可以对use元素应用同源策略，并可以拒绝在href属性中加载跨源URI 。

由于SVG 2，该xlink:href属性已被弃用。请参阅xlink:href页面了解更多信息。

用法上下文

属性

全局属性

• Conditional processing attributes »

• Core attributes »

• Graphical event attributes »

• Presentation attributes »

• Xlink attributes »

• class

• style

• externalResourcesRequired

• transform

具体属性

• x

• y

• width

• height

• href

DOM接口

这个元素实现了SVGUseElement接口。

例子

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
  <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" href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" href="#Port" style="fill: blue;"/>
</svg>

产品规格

浏览器兼容性