Elemento <use> do SVG

O elemento <use> SVG pode reutilizar formas SVG em outras localizações no documento SVG (incluindo elementos <g> e <symbol>). As formas reutilizáveis podem ser definidas dentro (fazendo com que a forma seja invisível até ser usada) ou fora do elemento <defs>.

Exemplo de use

Este é um exemplo simples do elemento <use>:

<svg　width="500"　height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"　></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"　y="50"　></use>
　　　　<use xlink:href="#shape" x="200"　y="50"　></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"></circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"></circle>
</svg>

Este exemplo mostra o elemento <g> definido dentro do elemento <defs>. Isso faz com que o <g> seja invisível, a menos que seja referenciado por um elemento <use>.

Antes de referenciar o elemento <g>, é necessário definir um ID para ele através de seu atributo ID. O elemento <use> faz isso através do atributo xlink:href. Note que há um # antes do valor do atributo.

O elemento <use> especifica onde exibir a forma reutilizada através de suas propriedades x e y. Observe que os shapes internos do elemento <g> estão localizados em 0,0. Isso é feito porque suas posições foram adicionadas ao local especificado pelo elemento <use>.

Efeito de imagem após a execução:

Os pontos azuis não fazem parte do exemplo. Eles foram adicionados para mostrar as coordenadas x e y dos dois elementos <use>.

Uso de forma fora do elemento <defs>

O elemento <use> pode reutilizar qualquer elemento de posição em uma imagem SVG, desde que a forma tenha um atributo id com valor único. Aqui está um exemplo:

<svg　width="500"　height="110">　　　　
<g　id="shape2">　　　　
<rect　x="0"　y="0"　width="50"　height="50"　/>　　　　
</g>　　　　
<use　xlink:href="#shape2"　x="200"　y="50"　/>　　　　
<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/>　　　　
</svg>

Este exemplo define um elemento <g> que contém um elemento <rect>. Em seguida, ele reutiliza o elemento <g> (incluindo o elemento <rect> aninhado) através do elemento <use>.

Efeito de imagem após a execução:

Observe que a forma original e sua versão reutilizada são exibidas simultaneamente. Isso ocorre porque a forma a ser reutilizada não foi definida dentro do elemento <defs> ou <symbol> (elemento <g>). Portanto, ela é visível.

Da mesma forma, os pontos azuis mostram as coordenadas do elemento <use>.

Definir estilos CSS

Se não houver estilos CSS definidos na forma original, você pode definir estilos CSS ao reutilizar a forma. Basta especificar os estilos que deseja definir na propriedade style do elemento <use>. Este é um exemplo:

<svg　width="500"　height="110">
　　<g　id="shape3">
　　　　　　<rect　x="0"　y="0"　width="50"　height="50"　/>
　　</g>
　　<use　xlink:href="#shape3"　x="100"　y="50"　style="fill:　#00ff00;"/>
　　<use　xlink:href="#shape3"　x="200"　y="50"　style="stroke:　#00ff00;　fill:　none;"/>
</svg>

Atenção, a forma original não possui atributo style. Então será usado o estilo padrão (normalmente preto) para renderização.