svgtexthrefxlink

How to use Tref in a SVG file?


I tried that code but "The text to be referenced to" is never displayed on the screen, maybe it's because xlink is deprecated; would you know how to update that code to make it working ? Or what function should I use instead of xlink:href ? Thank you very much in advance :)

 <svg xmlns="http://www.w3.org/2000/svg" version="1.0"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
    <text id="Textref">
    The text to be referenced to
    </text>
    </defs>

    <text x="20" y="20" font-size="30" fill="#9d1d20" >
    Inline text
    </text>

    <text x="20" y="40" font-size="30" fill="red" style="text-decoration:underline;">
    <tref xlink:href="#Textref"/>
    </text>
    </svg>

Solution

  • The tref tag may not be supported by your browser. You would need a use tag:

    <svg width="500" height="500"  xmlns="http://www.w3.org/2000/svg" version="1.0"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
        <text id="Textref">
        The text to be referenced to
        </text>
        </defs>
    
        <text x="20" y="20" font-size="30" fill="#9d1d20" >
        Inline text
        </text>
    
        <use  x="20" y="40" href="#Textref" font-size="30" fill="red" style="text-decoration:underline;" />
        </svg>