use

Este artigo necessita de uma revisão editorial. Como posso ajudar.

O elemento use cria nós dentro de um documento SVG, e os duplica em outro local. O efeito é o mesmo se os nós forem profundamente clonados em um DOM não exposto, e então colado onde o elemento use é, muito parecido com elementos de template clonados no HTML5. Como os nós clonados não são expostos, é preciso ter cuidado ao utilizar CSS para estilizar o elemento use e seus descendentes ocultos. Atributos CSS não é garantidamente herdado pelos ocultos, DOM clonada a não ser que você deixe a requisição explicita utilizando herança CSS.

Por motivos de segurança, alguns navegadores poderão aplicar uma política de "mesma origem" na utilização de elementos, bem como poderão recusar o carregamento de uma URI de "multiplas origens" dentro do 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

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)

Etiquetas do documento e colaboradores

 Colaboradores desta página: Sebastianz, caio
 Última atualização por: Sebastianz,