Elemento <textPath> SVG

L'elemento <textpath> di SVG viene utilizzato per posizionare il testo lungo un percorso (ad esempio, un cerchio), il che ha un aspetto molto cool. I diversi browser presentano il testo lungo il percorso in modo leggermente diverso, quindi assicurati di controllare l'aspetto del testo nei browser che supportano questa funzionalità.

Esempio online

<svg width="500" height="250">　　　　
<defs>　　　　
<path id="myTextPath" d="M75,20 a1,1 0 0,0 100,0" />　　　　
</defs>　　　　
<text x="20" y="80" style="stroke: #000000;">　　　　
<textPath xlink:href="#myTextPath">oldtoolbag.com tutorial di base...</textPath>　　　　
</text>　　　　
</svg>

Effetto dell'immagine dopo l'esecuzione:

Attenzione all'elemento <path> (interno all'elemento <defs>) che ha un attributo id. Il valore di questo attributo id è richiamato dall'attributo xlink:href dell'<textpath>.

Se la lunghezza del percorso è più breve della lunghezza del testo, viene disegnato solo il parte del testo che si trova all'interno dell'estensione del percorso.

Puoi anche utilizzare percorsi più avanzati. Ecco un esempio di percorso di testo più complesso:

<svg width="500" height="200">
　　　　<defs>
　　　　　　　　<path id="myTextPath2"
　　　　　　　　　　　　　　d="M75,20 l100,0 l100,30 q0,100 150,100"/>
　　　　</defs>
　　　　<text x="20" y="40" style="stroke: #000000;">
　　　　　　　　<textPath xlink:href="#myTextPath2">
　　　　　　　　　　　　oldtoolbag.com　Tutorial di base....
　　　　　　　　</textPath>
　　　　</text>
</svg>

Questo esempio definisce un percorso di testo composto da una linea orizzontale, una linea obliqua e una curva.

Effetto dell'immagine dopo l'esecuzione: