Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
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
Categorias | Elemento gráfico, Graphics referencing element, Elemento estructural |
---|---|
Contenido permitido | Cualquier número de los siguientes elementos, en cualquier orden: Elementos de animación Elementos descriptivos |
Example
<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>
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.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Load from external URI | (Yes) | (Yes) | No support | (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) |