use

O elemento use cria instâncias dentro de um documento SVG e os duplica em outro local. O efeito é o mesmo se as instâncias forem profundamente clonadas em um DOM não exposto, e então coladas onde o elemento use está (muito parecido com elementos de template clonados no HTML5). Como as instâncias clonadas não são expostas, é preciso ter cuidado ao utilizar CSS para estilizar o elemento use e seus descendentes ocultos. Não há garantia de que atributos CSS sejam herdados pelo DOM oculto e clonado, a menos que você os solicite explicitamente usando herança CSS.

Por motivos de segurança alguns navegadores poderão aplicar uma política de "mesma origem" com elementos use, bem como poderão recusar o carregamento de uma URI de múltiplas origens no atributo xlink:href.

Contexto de uso

CategoriasElemento gráfico, Elemento gráfico referenciado, elemento estrutural
Conteúdo permitidoQualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação
Elementos descritivos

Exemplo

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

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGUseElement.

Compatibilidade dos navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (Yes) (Yes) (Yes) (Yes) (Yes)
Load from external URI (Yes) (Yes) Não suportado (Yes) (Yes)
Load from data: URI ? 10.0 (10.0) ? ? ?
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) (Yes) ? (Yes) (Yes)
Load from external URI (Yes) (Yes) ? (Yes) (Yes)
Load from data: URI (Yes) (Yes) ? (Yes) (Yes)