use - SVG 编辑

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>

 

属性

全局属性

• 条件处理属性 »
• 核心属性 »
• 图形事件属性 »
• 外观属性 »
• Xlink属性 »
• class
• style
• externalResourcesRequired
• transform

专有属性

• x
• y
• width
• height
• xlink:href

DOM接口

该元素实现了SVGUseElement接口。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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)