HTML and CSS Reference
In-Depth Information
Figura 10.4
- Grafico a torta ottenuto con SVG.
Se non avete ben chiaro quello che abbiamo appena visto, non temete: raramente dovrete
procedere a ricostruire voi gli elementi e, molto più facilmente, potete contare su tool e li-
brerie che vi aiuteranno in tal senso.
Ora che abbiamo visto come disegnare manualmente gli elementi, vediamo come ag-
giungere del testo al documento.
All'interno di una figura, spesso, possiamo avere necessità di informazioni testuali: sebbe-
ne possano essere raffigurate con degli shape, non avrebbero significato dal punto di vista
del markup, non potrebbero essere selezionate come testo dall'utente e non sarebbero indi-
cizzate (come avviene di norma con le immagini bitmap).
Per questo motivo, SVG offre un tag
text
, che al suo interno può contenere del testo
formattato e dimensionato. Rispetto all'HTML5, inoltre, questo tag permette di cambiare
le posizioni e la rotazione di ogni carattere.
Vediamo quindi come utilizzare questo elemento, usando alcune delle caratteristiche
principali di questo tag.
Esempio 10.7
<svg width="200" height="150">
<text x="10" y="20"
font-family="Verdana"
font-size="30">
dx="2,0,0" dy="8,-6,-3"
rotate="-25,0,25">
SVG
</text>
</svg>
Nell'esempio 10.7
ci sono molteplici attributi in uso su cui vale la pena soffermarci:
x
e
y
sono utilizzati per indicare le coordinate dell'angolo basso/sinistro da cui parti-
re;
