We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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!

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,