Elemento <use> SVG

L'elemento SVG <use> può riutilizzare le forme SVG presenti in altre posizioni del documento SVG (inclusi gli elementi <g> e <symbol>), definendole all'interno o all'esterno dell'elemento <defs> (rendendo le forme invisibili fino al loro utilizzo).

Esempio di use

Questo è un esempio semplice dell'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>

Questo esempio mostra un elemento <g> definito all'interno dell'elemento <defs>. Questo rende l'elemento <g> invisibile, a meno che non venga riferito dall'elemento <use>.

Prima di riferirsi all'elemento <g>, deve essere impostato un ID tramite il suo attributo ID. L'elemento <use> lo fa tramite l'attributo xlink:href. Notate che l'ID è preceduto da un #.

L'elemento <use> specifica dove visualizzare la forma riutilizzata tramite i suoi attributi x e y. Notate che la forma all'interno dell'elemento <g> è posizionata a 0,0. Questo perché la loro posizione è stata aggiunta al punto specificato dall'elemento <use>.

Effetto dell'immagine dopo l'esecuzione:

Il punto rotondo blu non fa parte dell'esempio. È stato aggiunto per mostrare le coordinate x e y di due elementi <use>.

Utilizzo della forma al di fuori dell'elemento <defs>

L'elemento <use> può riutilizzare qualsiasi elemento in posizione in un'immagine SVG, purché la forma abbia un attributo id con un valore unico. Ecco un esempio:

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

Questo esempio definisce un elemento <g> che contiene un elemento <rect>. Poi, lo riutilizza attraverso l'elemento <use> (inclusi gli elementi <rect> annidati).

Effetto dell'immagine dopo l'esecuzione:

Notate che vengono mostrate sia la forma originale che la versione riutilizzata. Questo accade perché la forma da riutilizzare non è stata definita all'interno dell'elemento <defs> o <symbol> (elemento <g>). Pertanto, è visibile.

Anche così, i punti rossi mostrano le coordinate dell'elemento <use>.

Impostare uno stile CSS

Se non è stato impostato uno stile CSS sull'aspetto originale, è possibile impostare uno stile CSS quando si riutilizza la forma. Dovete solo specificare lo stile da impostare nell'attributo style dell'elemento <use>. Ecco un esempio:

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

Attenzione, la forma originale non ha impostato lo stile. Poi verrà utilizzato lo stile predefinito (solitamente nero) per il rendering.