use

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

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 de processamento condicional »
• Atributos principais »
• Atributos de eventos gráficos »
• Atributos de apresentação »
• Atributos XLink »
• class
• style
• externalResourcesRequired
• transform

Atributos específicos

• x
• y
• width
• height
• xlink:href

Interface DOM

Este elemento implementa a interface do SVGUseElement.

Compatibilidade dos navegadores