use
元素在SVG文档内取得目标节点,并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中,然后将其粘贴到use
元素的位置,很像HTML5中的克隆模板元素。因为克隆的节点是不可见的,所以当使用CSS样式化一个use
元素以及它的隐藏的后代元素的时候,必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性,除非你明文设置使用CSS继承。
出于安全原因,一些浏览器可能在use元素上应用同源策略,还有可能拒绝载入xlink:href属性内的跨源URI。
用法
类别 | 图形元素, 图形引用元素, 结构元素 |
---|---|
允许的内容物 | 任意数量、任意排序的下列元素: 动画元素 描述性元素 |
示例
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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) |