Elemento <defs> SVG

O elemento <defs> do SVG é usado para embedding definições que podem ser reutilizadas dentro de uma imagem SVG. Por exemplo, você pode agrupar formas SVG e reutilizá-las como uma única forma.

exemplo de defs

Este é um exemplo simples do elemento <defs>:

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect　x="100"　y="100"　width="100"　height="100"　/>
　　　　　　　　　　　　<circle　cx="100"　cy="100"　r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

As formas definidas dentro do elemento <defs> não são exibidas na imagem SVG. Antes de exibi-las, elas devem ser referenciadas por um elemento <use>. Abaixo está um exemplo:

<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>

Antes de poder referenciar o elemento <g>, deve ser configurado um ID para ele através de sua propriedade id. O elemento <use> faz referência ao elemento <g> através de sua propriedade xlink:href. Observe que o ID está antes do # no valor do atributo.

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

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

O ponto azul não está no exemplo. Ele foi adicionado para mostrar os x e y de dois elementos <use>.

Quais elementos podem ser definidos no elemento <defs>?

Você pode colocar os seguintes elementos dentro do elemento <defs>:

• Qualquer elemento de forma (rect, line, etc.)

• g

• symbol