Elemento <defs> SVG

L'elemento <defs> di SVG viene utilizzato per inserire definizioni che possono essere riutilizzate all'interno di un'immagine SVG. Ad esempio, è possibile raggruppare forme SVG e utilizzarle come una singola forma riutilizzabile.

Esempio di defs

Questo è un esempio semplice dell'elemento <defs>:

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

Le forme definite nell'elemento <defs> non vengono visualizzate nell'immagine SVG. Prima di mostrarle, devono essere richiamate dall'elemento <use>. Ecco un esempio:

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

Prima di poter fare riferimento all'elemento <g>, deve essere assegnato un ID a esso tramite la proprietà id. L'elemento <use> fa riferimento all'elemento <g> tramite l'attributo xlink:href. Nota il numero # davanti all'ID.

L'elemento <use> specifica dove visualizzare le forme riutilizzate tramite le proprietà x e y. Nota che le forme all'interno dell'elemento <g> sono posizionate a 0,0. Questo perché la loro posizione è stata aggiunta alla posizione specificata dall'elemento <use>.

Effetto dell'immagine dopo l'esecuzione:

Il punto blu non è nell'esempio. È stato aggiunto per mostrare le coordinate x e y di due elementi <use>.

Quali elementi si possono definire all'interno dell'elemento <defs>?

Puoi mettere i seguenti elementi all'interno dell'elemento <defs>:

• Qualsiasi elemento di forma (rect, line, ecc.)

• g

• simbolo