SVG Tutorial

SVG element

SVG <textPath> Element SVG <tspan> Element

SVG <tref> Element

The SVG <tref> element is used to reference text defined by the <defs> element. This way, you can display the same text multiple times in an SVG image without including the <text> element multiple times.

Online Example

This is an example:

Example

<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="http:
　　<defs>
　　　　<text id="ReferencedText">
　　　　　　Referenced character data (oldtoolbag.com) </text>
　　</defs>
　　<text x="100" y="100" font-size="45" >
　　　　Inline character data (oldtoolbag.com) </text>
　　<text x="100" y="200" font-size="45" fill="red">
　　　　<tref xlink:href="#ReferencedText"/>
　　</text>
　　<!--　Use the "rect" element to display the outline of the canvas　-->
　　<rect x="1" y="1" width="598" height="198"
　　　　　　　　fill="none" stroke-width="2"　/></svg>

Test and see‹/›

Image effect after running:

Note how the <text> element (inside the <defs> element) has an id attribute. This id attribute value is referenced from the element's xlink:href attribute to the <tref>.

SVG <textPath> Element SVG <tspan> Element