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

最终图片如下:

A text that is referenced.

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

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

最后更新于