Elemento <tspan> SVG

L'elemento <tspan> di SVG viene utilizzato per disegnare testi multiriga in SVG. Non è necessario posizionare assolutamente ogni riga di testo, l'elemento <tspan> rende possibile posizionare una riga di testo rispetto alla riga precedente. L'elemento <tspan> permette anche di selezionare e incollare più righe di testo in una volta, non solo un elemento <text>.

Esempio di tspan

Questo è un semplice esempio di <tspan>:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linea 1 tspan</tspan>
　　　　　　　　<tspan>tspan　linea　2</tspan>
　　　　</text>
</svg>

Ecco l'immagine di risultato:

Notare come il risultato di <tspan> determina la posizione delle righe di testo rispetto a ciascun altro (dopo ciascun altro).

Posizionamento verticale

Se si desidera posizionare verticalmente le linee in modo relativo, si può utilizzare l'attributo dy (delta y):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linea 1 tspan</tspan>
　　　　　　　　<tspan　dy="10">tspan　linea　2</tspan>
　　　　</text>
</svg>

Ora, poiché l'attributo dy del secondo elemento <tspan> è impostato a "10", la seconda riga di testo viene visualizzata 10 pixel sotto la prima riga di testo. Ecco l'immagine di risultato:

Se si desidera posizionare l'elemento <tspan> in una posizione y assoluta, utilizzare le proprietà come si farebbe con l'elemento <text>.

Se si scrivono più numeri nell'attributo dy, ciascun numero viene applicato ai caratteri del testo all'interno dell'elemento <tspan>. Ecco un esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　　　　<text　x="10"　y="15">
　　　　　　　　　　　　<tspan　dy="5　10　20">
　　　　　　　　　　　　　　　　123
　　　　　　　　　　　　</tspan>
　　　　　　　　</text>
　　　　</svg>

Questa è l'immagine generata. Nota come la spaziatura verticale tra i caratteri è cambiata.

Posizionamento orizzontale

Per posizionare il testo in modo relativo sull'asse x, puoi utilizzare l'attributo dx (delta x). Il seguente esempio mostra l'effetto di impostare dx a 30 . Nota che ora la seconda riga di testo viene visualizzata 30 pixel rispetto alla fine della prima riga di testo (non all'inizio):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text x="20" y="15">
　　　　　　　　<tspan>linea 1 tspan</tspan>
　　　　　　　　<tspan dx="30" dy="10">linea 2 tspan</tspan>
　　　　</text>
</svg>

Ecco l'immagine di risultato:

Se si specificano più numeri nell'attributo dx, ogni numero viene applicato a ogni lettera all'interno dell'elemento <tspan> . Ecco un esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　<tspan dx="5 10 20">123</tspan>
</text></svg>

Ecco l'immagine di risultato:

Puoi anche impostare l'attributo x per fissare la coordinate x della riga di testo. Se si desidera visualizzare una lista di tutte le righe non modificate una sotto l'altra, questo sarà molto utile. Ecco un esempio in cui x è impostato a 10 per tre righe:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<text y="20">
　　　　　　　　<tspan x="10">linea 1 tspan</tspan>
　　　　　　　　<tspan x="10" dy="15">linea 2 tspan</tspan>
　　　　　　　　<tspan x="10" dy="15">linea 3 tspan</tspan>
　　　　</text>
</svg>

Ecco l'immagine di risultato:

Elemento tspan di stile

Puoi impostare stili di singoli elementi. Pertanto, puoi utilizzare l'elemento <tspan> per impostare lo stile di un blocco di testo, in modo che sia diverso dal testo restante. Ecco un esempio:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
　　　　Ecco una parola <tspan style="font-weight: bold;">bold</tspan>.
</text></svg>

Ecco l'immagine di risultato:

Indici superiori e inferiori di spostamento di base

Puoi utilizzare l'attributo CSS baseline-shift per creare indici superiori e inferiori con l'elemento <tspan> . Questo è un esempio di SVG baseline-shift che mostra come:

<svg width="500" height="100">　　　　
<text x="10" y="20">　　　　
Ecco un testo con <tspan style="baseline-shift: super;">sovrascritto</tspan>　　　　
Ecco un testo con <tspan style="baseline-shift: sub;">sottoscritto</tspan> mescolato con normale　　　　
testo.　　　　
</text>　　　　
</svg>

Questo è l'immagine generata. (Attenzione: Firefox potrebbe non supportarlo)