SVG Text

Descrizione dell'elemento `<text>`

L'elemento SVG <text> specifica un elemento grafico utilizzato per visualizzare testo. Viene inserito all'interno di un elemento <svg> e posizionato tramite le coordinate x e y. È possibile applicare un pattern, un percorso di ritaglio, una maschera, un gradiente o un filtro a <text>, proprio come con altri elementi grafici SVG. Qualsiasi testo che non si trova all'interno di un elemento <text> non verrà renderizzato.

Nota: Il <text> SVG non va a capo automaticamente. Un singolo elemento <text> viene visualizzato su una riga; il testo non si spezza su una nuova riga quando raggiunge il bordo del canvas SVG. Per suddividere il testo su più righe è necessario posizionare le righe manualmente con elementi <tspan> (ciascuno con la propria coordinata y), usare elementi <text> separati, oppure far scorrere il testo lungo un percorso con <textPath>.

Il testo SVG supporta funzionalità tipografiche come decorazioni del testo, scelta del carattere tipografico e uso di legature discrezionali, stilistiche o storiche.

SVG supporta anche le esigenze di elaborazione del testo internazionale:

testo da sinistra a destra o bidirezionale,
orientamento verticale e orizzontale del testo,
layout di testo complesso,
allineamento dei glifi a diverse linee di base.

È possibile avere contenuto SVG multilingue sostituendo varie stringhe di testo in base alla lingua preferita dell'utente.

Per stilizzare il testo, è possibile utilizzare proprietà CSS specifiche per il testo come font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, stroke-width e fill.

Esempio dell'elemento SVG `<text>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" >
      <text x="20" y="25" fill="purple">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Rotazione del testo: `transform` vs l'attributo `rotate`

Esistono due modi diversi per ruotare il testo SVG, ed è facile confonderli:

transform="rotate(angle cx cy)" ruota l'intero elemento <text> come un unico blocco attorno a un punto centrale. La stringa rimane dritta; l'intera riga è inclinata.
L'attributo rotate ruota ogni singolo glifo (carattere) sul posto. Le lettere si trovano ad un angolo, ma la riga di testo scorre comunque orizzontalmente.

L'esempio seguente usa transform per inclinare l'intera riga di 40 gradi attorno al punto (30, 60):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="150" style="border:1px solid red">
      <text x="20" y="25" fill="purple" transform="rotate(40 30,60)">This is a SVG text example.</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Al contrario, l'attributo rotate ruota ogni carattere individualmente senza inclinare la linea di base:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="80" style="border:1px solid #cccccc">
      <text x="20" y="50" fill="purple" rotate="25">Glyphs rotated</text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Allineamento del testo con `text-anchor` e `dominant-baseline`

Per impostazione predefinita, le coordinate x/y segnano l'inizio del testo e si trovano sulla linea di base alfabetica. Due attributi modificano questo comportamento:

text-anchor controlla l'allineamento orizzontale rispetto a x. Valori: start (predefinito, il testo inizia in x), middle (il testo è centrato su x) e end (il testo termina in x). È essenziale per centrare le etichette.
dominant-baseline controlla l'allineamento verticale rispetto a y. Valori comuni: auto/alphabetic (predefinito), middle, central, hanging e text-bottom. Usa middle per centrare verticalmente il testo sulla coordinata y.

Nel prossimo esempio tutte e tre le etichette condividono lo stesso x="125", ma text-anchor le fa allineare diversamente rispetto alla linea di riferimento tratteggiata:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="120" style="border:1px solid #cccccc">
      <line x1="125" y1="0" x2="125" y2="120" stroke="red" stroke-dasharray="4" />
      <text x="125" y="30" text-anchor="start">start</text>
      <text x="125" y="60" text-anchor="middle">middle</text>
      <text x="125" y="90" text-anchor="end">end</text>
    </svg>
  </body>
</html>

Utilizzo di `<tspan>` per più righe

L'elemento <tspan> è un figlio di <text> che consente di modificare la posizione, lo stile o la formattazione di una porzione di testo senza uscire dall'elemento <text> padre. Poiché il testo SVG non va a capo, <tspan> è il modo standard per suddividere un blocco logico di testo su più righe: assegnare a ciascun <tspan> le proprie coordinate x e y (oppure usare dy per compensare rispetto alla riga precedente).

Usa <tspan> invece di elementi <text> separati quando le parti appartengono insieme come un'unica etichetta accessibile o condividono lo stile — un <tspan> eredita gli attributi del genitore e rimane parte dello stesso nodo di testo. Usa elementi <text> separati quando le parti sono genuinamente indipendenti.

L'esempio seguente usa <tspan> per posizionare tre righe:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="450" height="150" style="border:1px solid #cccccc">
      <text x="20" y="20" style="fill:green">
        Example of the SVG "text" element used with the "tspan" element
        <tspan x="25" y="65">This is a SVG text.</tspan>
        <tspan x="35" y="90">This is a SVG text.</tspan>
        <tspan x="45" y="115">This is a SVG text.</tspan>
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Posizionare il testo su un percorso con `<textPath>`

Per far seguire al testo una curva o qualsiasi altra forma, racchiuderlo in un elemento <textPath> e puntare il suo href all'id di un <path> (o di un'altra forma). Il testo scorrerà quindi lungo quel percorso. Definire il percorso all'interno di <defs> affinché sia riutilizzabile e non venga disegnato esso stesso. Vedere il capitolo SVG <path> per capire come funzionano i dati del percorso (d).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="120" style="border:1px solid #cccccc">
      <defs>
        <path id="curve" d="M20,90 Q150,10 280,90" />
      </defs>
      <text fill="purple">
        <textPath href="#curve">Text flowing along a curved path</textPath>
      </text>
    </svg>
  </body>
</html>

Esempio dell'elemento SVG `<text>` usato con l'elemento `<a>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="250" height="60" style="border:1px solid #cccccc">
      <a href="/learn-html/svg-intro" target="_blank">
        <text x="20" y="40" fill="blue" font-size="2em">SVG Intro</text>
      </a>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Stile e accessibilità

Il testo all'interno di <text> e <tspan> viene stilizzato con proprietà specifiche per il testo, che è possibile impostare come attributi di presentazione (es. font-size="20", font-weight="bold", font-family="Verdana") oppure con CSS. Le più comuni sono font-family, font-size, font-weight, font-style, text-decoration, letter-spacing, fill (il colore del testo) e stroke/stroke-width (il contorno). Consultare la tabella degli Attributi di seguito per gli attributi relativi al layout.

Accessibilità: Il testo SVG viene disegnato come grafica, quindi non è sempre esposto alle tecnologie assistive come il normale testo HTML. Fornire a un SVG significativo un <title> come primo figlio dell'elemento <svg> (o <text>), e aggiungere aria-label/role="img" affinché i lettori di schermo lo annuncino. Ad esempio:
<svg width="250" height="60" role="img" aria-label="SVG text example">
  <title>SVG text example</title>
  <text x="20" y="40" fill="purple">Accessible SVG text</text>
</svg>

Attributi

Attributo	Descrizione
x	Specifica la coordinata x iniziale della linea di base del testo.
y	Specifica la coordinata y iniziale della linea di base del testo.
dx	Specifica lo spostamento orizzontale della posizione del testo rispetto alla posizione precedente.
dy	Specifica lo spostamento verticale della posizione del testo rispetto alla posizione precedente.
rotate	Ruota ogni singolo glifo (non l'intero elemento — usa `transform="rotate(...)"` per quello).
lengthAdjust	Specifica come il testo viene compresso o allungato per adattarsi alla larghezza definita dall'attributo textLength.
textLength	Specifica la larghezza in cui il testo deve rientrare.
text-anchor	Specifica l'allineamento orizzontale del testo: `start`, `middle` o `end`.
dominant-baseline	Specifica l'allineamento verticale del testo sulla sua linea di base (es. `middle`, `hanging`).
font-family	Imposta il carattere tipografico, es. `Arial, sans-serif`.
font-size	Imposta la dimensione del testo, es. `20` o `1.5em`.
font-weight	Imposta il peso, es. `normal` o `bold`.
font-style	Imposta lo stile, es. `normal` o `italic`.

L'elemento SVG <text> supporta anche gli Attributi Globali e gli Attributi Evento.

Esercitazione

Pratica

Quale attributo centra orizzontalmente il testo SVG sulla sua coordinata 'x'?

text-anchor='middle'dominant-baseline='middle'rotate='90'text-align='center'

Descrizione dell'elemento <text>

Esempio dell'elemento SVG <text>:

Rotazione del testo: transform vs l'attributo rotate

Allineamento del testo con text-anchor e dominant-baseline

Utilizzo di <tspan> per più righe

Posizionare il testo su un percorso con <textPath>

Esempio dell'elemento SVG <text> usato con l'elemento <a>:

Stile e accessibilità

Attributi

Esercitazione

Descrizione dell'elemento `<text>`

Esempio dell'elemento SVG `<text>`:

Rotazione del testo: `transform` vs l'attributo `rotate`

Allineamento del testo con `text-anchor` e `dominant-baseline`

Utilizzo di `<tspan>` per più righe

Posizionare il testo su un percorso con `<textPath>`

Esempio dell'elemento SVG `<text>` usato con l'elemento `<a>`: