use

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

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

用法

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

示例

<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接口。

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Load from external URI (Yes) (Yes) 未实现 (Yes) (Yes)
Load from data: URI ? 10.0 (10.0) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)
Load from external URI (Yes) (Yes) ? (Yes) (Yes)
Load from data: URI (Yes) (Yes) ? (Yes) (Yes)

文档标签和贡献者

 此页面的贡献者: Sebastianz, ObooChin, fanxiaojie
 最后编辑者: Sebastianz,