如何在 SVG 文件中使用 Tref？

Question

我试过该代码，但 "The text to be referenced to" 从未显示在屏幕上，可能是因为 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>

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

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

如何在 SVG 文件中使用 Tref？

How to use Tref in a SVG file?

svg

text

href

xlink