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
Categorias | Elemento gráfico, Elemento gráfico referenciado, elemento estrutural |
---|---|
Conteúdo permitido | Qualquer número dos seguintes elementos, em qualquer ordem: Elementos de animação Elementos descritivos |
Exemplo
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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
BCD tables only load in the browser