教程 SVG

Elemento SVG

Elemento <textPath> SVG Elemento <tspan> SVG

Elemento <tref> SVG

L'elemento <tref> di SVG viene utilizzato per riferirsi al testo definito dall'elemento <defs>. In questo modo, è possibile visualizzare lo stesso testo più volte nell'immagine SVG senza dover includere più volte l'elemento <text>.

Esempio online

Questo è un esempio:

Esempio

<svg width="100%" height="100%" viewBox="0 0 1000 300"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　Caratteri dati di riferimento (oldtoolbag.com) </text>
　　</defs>
　　<text x="100" y="100" font-size="45">
　　　　Caratteri dati inline (oldtoolbag.com) </text>
　　<text x="100" y="200" font-size="45" fill="red">
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　<!-- Usa l'elemento "rect" per visualizzare il contorno del canvas -->
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/>

Prova a vedere‹/›

Effetto immagine dopo l'esecuzione:

Attenzione all'elemento <text> (interno all'elemento <defs>) che ha un attributo id. Questo valore di id è riferito dall'attributo xlink:href dell'elemento <tref>.

Elemento <textPath> SVG Elemento <tspan> SVG