Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
The <use>
element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use
element is, much like cloned template elements in HTML5. Since the cloned nodes are not exposed, care must be taken when using CSS to style a use
element and its hidden descendants. CSS attributes are not guaranteed to be inherited by the hidden, cloned DOM unless you explicitly request it using CSS inheritance.
For security reasons, some browsers could apply a same-origin policy on use
elements and could refuse to load a cross-origin URI within the xlink:href
attribute.
Usage context
Categories | Graphics element, Graphics referencing element, Structural element |
---|---|
Permitted content | Any number of the following elements, in any order: Animation elements Descriptive elements |
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
- Xlink attributes »
class
style
externalResourcesRequired
transform
Specific attributes
DOM Interface
This element implements the SVGUseElement
interface.
Example
<svg width="80" height="80" 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>
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of '<use>' in that specification. |
Candidate Recommendation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<use>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer/Edge | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 22 | 4.0 | 13 | 11.5 |
5.1 |
Load from external URI | 22 | 4.0 | 13 | 11.5 | 6.1 |
Load from data: URI | 22 | 4.0 | 13 | 11.5 | 5.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile/Edge | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.0 | 4.0 | 13 | 11.5 |
5.1 |
Load from external URI | 4.4 | 4.0 | 13 | 11.5 | 6.1 |
Load from data: URI | 4.0 | 4.0 | 13 | 11.5 | 5.1 |