19.SVG-tref元素.md

SVG tref元素

---

SVG<tref>元素用来引用<defs>元素中定义的文本。这样，你就可以在SVG图片中展示多个相同的文本，而不必包含多个文本。

示例代码如下：

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

最终图片如下：

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

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

可以发现，（<defs>元素中的）<text>元素有一个id属性。id属性值在<tref>元素的xlink:href属性中引用。

注意：原文中未提及一点，Chrome暂时不支持此元素，如果你使用Chrome打开此页面就会发现文本并未展示。