Passiamo adesso a parlare dell'elemento grafico utilizzato in SVG per inserire del testo all'interno della nostra immagine, ovvero l'elemento Text. Come già visto in alcuni esempi nei capitoli precedenti, per inserire del testo dobbiamo utilizzare il tag <text>.
<text x="10" y="20">Scritta</text>
tramite questo tag visualizzeremo la scritta all'interno della nostra immagine SVG, posizionandola a partire dal punto le cui coordinate sono espresse mediante gli attributi x e y del tag <text>. In particolare il punto indicato tramite i due attributi corrisponde al vertice inferiore sinistro del primo carattere della scritta.
Con il tag <text> noi possiamo inserire del testo indicandone la posizione assoluta, cioé specificando le coordinate del punto in cui vogliamo far comparire la scritta.
Se doevessiomo inserire del testo disposto su più righe, potrebbe essere comodo poter inserire il testo indicandone la posizione in maniera relativa, ad esempio indicando la posizione di ciascuna riga in funzione della riga precedente.
In SVG questo è possibile utilizzando l'elemento <tspan>, in abbinata all'elemento <text>.
Consideriamo il seguente esempio:
<text x="20" y="10">Prima riga
<tspan x="20" dy="20">Seconda riga</tspan>
<tspan dx="10" dy="20">Terza Riga</tspan>
</text>
Gli attributi del tag <tspan> dx e dy indicano di quanto deve essere traslato (rispettivamente lungo gli assi X e Y) il testo, contenuto all'interno del tag, rispetto all'elemento di testo precedente.
In questo caso dunque la prima riga è posizionata a partire del punto di coordinate x=20, y=10; la seconda riga è posizionata ad una distanza di 20 pixel lungo l'asse Y rispetto alla prima riga, mantenendo invece inalterata la posizione lungo l'asse X; mentre la terza riga è traslata di 10 pixel lungo l'asse X e di 20 pixel lungo l'asse Y rispetto alla seconda riga.
Come si vede dall'esempio, è possibile posizionare in maniera assoluta anche l'elemento <tspan> utilizzando gli attributi x e y allo stesso modo dell'elemento <text>.
In SVG possiamo caratterizzare l'aspetto del testo che comparirà all'interno degli elementi <text> e <tspan> mediante l'uso di appositi attributi.
Gli attributi principali sono:
- font-family: permette di specificare il tipo di font della scritta (Times, arial,....);
- font-size: indica la dimensione dei caratteri che compongono la scritta;
- font-style: ci consente di stabilire lo stile del testo (normal, italic, oblique);
- font-weight: indica la grandezza dei caratteri del testo (normal, bold, bolder, lighter,....);
- text-decoration: permette di definire l'aspetto del testo (normal, underline, line-through, overline);
- fill: indica la colorazione della scritta (red, black,......);
- stroke: indica la colorazione del bordo della scritta (red, black,....);
- text-anchor: stabilisce l'allineamento del testo (start, middle, end);
- baseline-shift: permette di creare scritte posizionate come apici superiori o apici inferiori (super,sub);
- letter-spacing: stabilisce la distanza tra i caratteri della scritta;
- word-spacing: stabilisce la distanza tra le parole che compongono la scritta;
Proviamo adesso a chiarire l'uso di questi attributi facendo alcuni esempi:
<text x="80" y="50" font-size="18" font-family="times" fill="Black">Prima Scritta
<tspan x="80" dy="20" fill="none" stroke="blue">Seconda Scritta</tspan>
<tspan x="80" dy="20" font-style="oblique" text-anchor="middle">Terza Scritta</tspan>
<tspan x="80" dy="20" font-style="bold">Quarta Scritta</tspan>
<tspan x="80" dy="20" font-style="lighter" fill="red">Quinta</tspan>
<tspan font-style="lighter" baseline-shift="sub" fill="red">Scritta</tspan>
<tspan fill="green"> e Sesta</tspan>
<tspan baseline-shift="super" fill="green">Scritta</tspan>
</text>
Da questo esempio si evidenzia come l'elemento <tspan> sia utile oltre che per posizionare in maniera relativa il testo, anche per definire particolari proprietà di parti del nostro testo (come nel caso della quinta e della sesta scritta).
Una scritta in SVG può anche essere posizionata lungo il bordo di un path utilizzando l'elemento <textPath>.
Questo elemento sarà però affrontato più in dettaglio nel corso del capitolo 10.
