HTML and CSS Reference
In-Depth Information
<svg width="300" height="200">
<g id="SVGLogo" fill="red" stroke="black">
<rect width="66" height="50" />
<text font-family="Verdana" font-size="30"
y="36" stroke-width="1">
SVG
</text>
</g>
</svg>
L'altro aspetto interessante del raggruppamento è che, dandogli opportunamente un nome
con l'attributo
id
, possiamo riutilizzarlo più volte attraverso l'elemento
use
.
Questo tag permette di riutilizzare e riposizionare gli elementi, eventualmente appli-
cando trasformazioni, il tutto facendo riferimento al nodo attraverso
XLink
.
Questo standard permette di collegare risorse (interne ed esterne) con l'attributo
href
,
specificando anche informazioni come titolo e tipologia.
Nell'esempio 10.10
possiamo ve-
dere come utilizzare questo standard per linkare il gruppo in base al suo
id
.
Esempio 10.10
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g id="SVGLogo" fill="red" stroke="black">
<rect width="66" height="50" />
<text font-family="Verdana"
font-size="30" y="36" stroke-width="1">
SVG
</text>
</g>
<use x="66" y="50" xlink:href="#SVGLogo" />
</svg>
Così facendo, otteniamo due loghi, come possiamo vedere nella
figura 10.7
.
In modo simile a
g
, l'elemento
defs
permette di definire degli elementi come se fos-
sero delle risorse, visualizzabili solo usando il tag
use
. Sono utilizzati in modo particolare
con i gradienti e, in generale, per quegli elementi che da soli non rappresentano qualcosa,
ma devono obbligatoriamente essere usati da un altro elemento.
