Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El elemento use toma los nodos que están dentro del documento SVG y duplica el contenido donde éste esté siendo utilizado. El efecto es el mismo, como si éstos nodos hubiesen sido profundamente clonados en un elemento DOM no expuesto, y luego pegados donde se encuentra el elemeto use, al igual que los elementos plantilla son clonados en HTML5. Desde que los elementos clonados no sean expuestos como DOM, su cuidado debe tomarse en cuenta durante el uso de CSS para estilizar un elemento use y sus descendientes ocultos. Los atributos CSS no ofrecen la garantía de heredarse en los elementos DOM clonados y escondidos, a no ser que lo realice utilizando herencia CSS.

Por razones de seguridad, algunos navegadores podrían aplicar una política del mismo origen sobre los elementos use y podrían negarse a cargar una URI de origen cruzado dentro del atributo xlink:href.

Contexto de uso

CategoriasElemento gráfico, Graphics referencing element, Elemento estructural
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos

Ejemplo

<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>

 

Atributos

Atributos Globales

Atributos específicos

Interfaz DOM

Este elemento implementa la interface SVGUseElement.

Compatibilidad entre navegadores

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!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
Carga desde una URL externa (Yes) (Yes) Sin soporte (Yes) (Yes)
Carga desde dato: URI ? 10.0 (10.0) ? ? ?
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico (Yes) (Yes) ? (Yes) (Yes)
Carga desde una URL externa (Yes) (Yes) ? (Yes) (Yes)
Carga desde dato: URI (Yes) (Yes) ? (Yes) (Yes)

Etiquetas y colaboradores del documento

Colaboradores en esta página: andysierra, Sebastianz, jorge_castro
Última actualización por: andysierra,