Tech and Media Labs
This site uses cookies to improve the user experience.




SVG tref element

Jakob Jenkov
Last update: 2014-06-15

The SVG <tref> element is used to reference texts that are defined by the <defs> element. This way you can display the same text multiple times in your SVG image, without having to include the text more than once.

Here is an example:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <text id="theText">A text that is referenced.</text>
    </defs>

    <text x="20" y="10">
        <tref xlink:href="#theText" />
    </text>
    <text x="30" y="30">
        <tref xlink:href="#theText" />
    </text>
</svg>

And here is the resulting image:

A text that is referenced.

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

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC