Testo <text> SVG

L'elemento <text> SVG viene utilizzato per disegnare il testo all'interno di un'immagine SVG. Utilizzando l'elemento <text> all'interno di svg, è possibile realizzare la scrittura di testo, la rotazione del testo, il testo multilinea, il testo con link ipertestuali, ecc.

Per disegnare il testo, utilizzare l'elemento <text>.

　　　　　　<h1>Testo SVG</h1>
　　　　　　<svg width="550" height="150">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="40" y="23">Testo: </text>
　　　　　　　　　　　　<text x="40" y="40" fill="rgb(121,0,121)">it.oldtoolbag.com Tutorial di base</text>
　　　　　　　　　</g>　
　　　　　　</svg>

L'effetto dopo l'esecuzione è il seguente:

Testo SVG

Spiegazione dell'uso

x: Definisce la posizione dell'angolo superiore sinistro del testo.

y: Definisce la posizione superiore del testo.

width: definisce la larghezza.

height: definisce l'altezza.

fill: l'attributo fill viene utilizzato per definire il colore di riempimento.

Testo Ruotato

Si utilizza per creare testi ruotati.

<svg height="100" width="200">
　　<text x="0" y="15" fill="red" transform="rotate(30 20,40)">it.oldtoolbag.com</text>
</svg>

L'effetto dopo l'esecuzione è il seguente:

Spiegazione dell'uso

x: definisce la posizione in alto a sinistra.

y: definisce la posizione superiore.

width: definisce la larghezza.

height: definisce l'altezza.

fill: l'attributo fill viene utilizzato per definire il colore di riempimento.

Testo Multilinea

Si utilizza per creare testi multilinea. Utilizzando l'elemento <tspan>, è possibile organizzare l'elemento <text> in un numero illimitato di sottoinsiemi.

<svg width="570" height="100">
　　<g>
　　<text x="40" y="23">Testo Multilinea: </text>
　　<text x="40" y="40" fill="rgb(121,0,121)">it.oldtoolbag.com
　　　<tspan x="40" y="60" font-weight="bold">Tutorial di base online.</tspan>
　　　</text>
　　</g>
　</svg>

L'effetto dopo l'esecuzione è il seguente:

Spiegazione dell'uso

x: definisce la posizione in alto a sinistra.

y: definisce la posizione superiore.

width: definisce la larghezza.

height: definisce l'altezza.

fill: l'attributo fill viene utilizzato per definire il colore di riempimento.

Testo con link ipertestuale

Si utilizza per creare testi con link ipertestuali.

　　　　　　<svg width="500" height="100">
　　　　　　　　　<g>
　　　　　　　　　　　　<text x="20" y="10">Testo come Link: </text>
　　　　　　　　　
　　　　　　　　　　　　<a xlink:href="https://it.oldtoolbag.com/svg-tutorial" target="_blank">
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40"}　
　　　　　　　　　　　　　　　<text font-family="Verdana" font-size="30" x="40" y="40">it.oldtoolbag.com</text>
　　　　　　　　　　　　</a>
　　　　　　　　　</g>
　　　　　　</svg>

L'effetto dopo l'esecuzione è il seguente:

Spiegazione dell'uso

x: definisce la posizione in alto a sinistra.

y: definisce la posizione superiore.

width: definisce la larghezza.

height: definisce l'altezza.

fill: l'attributo fill viene utilizzato per definire il colore di riempimento.