<use>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

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 elemento 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, Elemento de referencia de gráficos, Elemento estructural
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos de animación
Elementos descriptivos

Ejemplo

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

Especificaciones

Specification
Scalable Vector Graphics (SVG) 2
# UseElement

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
use
Load from data: URI
Load from external URI
height
href
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.