如何在 SVG 文件中使用 Tref？答案

【问题标题】：How to use Tref in a SVG file?如何在 SVG 文件中使用 Tref？
【发布时间】：2019-09-25 16:01:12
【问题描述】：

我尝试了该代码，但“要引用的文本”从未显示在屏幕上，可能是因为不推荐使用 xlink；您知道如何更新该代码以使其正常工作吗？或者我应该使用什么函数来代替 xlink:href ？提前非常感谢你:)

 <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>

【问题讨论】：

标签： svg text href xlink

【解决方案1】：

您的浏览器可能不支持tref 标签。你需要一个use 标签：

<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>

【讨论】：

【解决方案2】：

tref 一直是dropped from SVG 2，目前没有浏览器支持它。只需将文本内联放在任何你想要的地方。

<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
 
    <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;">
    The text to be referenced to
    </text>
    </svg>

【讨论】：