【SVG】如何使用tref元素重用SVG文本

写一次SVG代码，然后在多个地方重用，可以帮助你写出更多模块化的代码，而且它也有助于维护。通过tref元素，SVG可以很方便地重用text元素的内容。

上周我大概讲解了tspan元素，并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——x、y、dx和dy，还提到了其它几个属性。

我们现在来讲讲剩下的两个属性，然后再讲讲使用tref元素重用SVG文本。不过注意tref元素是SVG 1.1规范的一部分，它已经从SVG 2.0规范中删除了。我在这里介绍它，也许哪天你就碰到它了呢。

textLength和lengthAdjust属性

还有两个属性是textLength和lengthAdjust，这两个属性都可以直接添加给任何tspan元素。

我们先创建一个SVG元素，定义视窗的尺寸，然后给它添加样式，这样我们可以看到视窗的边框以及渲染到视窗之外的内容，字号加大。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <text textLength="400" lengthAdjust="spacingAndGlyphs">  
    <tspan x="280" y="80">SVG 1</tspan>  
    <tspan x="280" dy="36" fill="red">SVG 2</tspan>  
  </text>  
</svg>

我把两个tspan上下放置，给第二个tspan加一个红色填充。我还给<text>元素添加了textLength和lengthAdjust属性。然而，文本没有拉伸。

但是，给第一个tspan添加了这两个属性之后，它确实拉伸了间隔、还有字形，如下图所示。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <text x="280" y="40">  
    <tspan x="280" y="80" textLength="400" lengthAdjust="spacingAndGlyphs">SVG 1</tspan>  
    <tspan x="280" dy="36" fill="red">SVG 2</tspan>  
  </text>  
</svg>

这是为什么呢？他们和rotate属性不一样，给text元素设置的textLength和lengthAdjust，不会扩散到tspan。

这是一个例外，我发现如果你给text元素添加textLength和lengthAdjust属性，然后没有给第一个tspan设置x和y的值，那么textLength和lengthAdjust也有可能会被继承。

我不确定这是bug，还是预期的行为，但是我还是在这里提出来说一下，以防你之后碰到，然后纠结为什么。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <text x="280" y="80" textLength="400" lengthAdjust="spacingAndGlyphs">hello  
    <tspan>SVG 1</tspan>  
    <tspan x="280" dy="36" fill="red">SVG 2</tspan>  
  </text>  
</svg>

在这个示例中我直接给text元素添加了hello文本，在第一个tspan之前，我直接给text元素添加了这两个属性。我还给text元素加了定位，但是我没有给第一个tspan添加任何x和y坐标，所以它定位在hello文本之后。

hello这个单词被拉伸了，因为它是text中的内容，但是第一个tspan中的内容“SVG 1”也被拉伸了。也就是说设置textLength和lengthAdjust会拉伸它们被应用的直线上（同一水平线），而不考虑它们是设置在哪个元素之上。

如果你把第二个tspan元素的定位坐标删除，它也会成为被拉伸的元素之一，因为它也和前两个元素统一了战线。

不过我还是不确定这是否是预期的行为，或者是bug，或者是我写错了什么，在这里指出欢迎大家拍砖。

tref元素

注意：tref元素是SVG 1.1规范的内容，但是它已经从SVG 2.0规范中删除了。也就是说在你看到这篇文章的时候，可能它已经不工作了。所以这里使用图片来展示实例的结果

早在之前SVG系列的文章中，我说了可以在一个位置定义SVG代码，然后在SVG文件的其它部分重用。

tref元素也是一样的。它允许你在一个<defs>元素中定义引用文本，然后在后面引用它。如果你不了解<defs>的话，我建议你回去看看之前的文章。

或者你可以看看我前面创建<text>元素时候的示例，我在<defs>标签中定义了<text>元素。注意我给<text>元素添加了一个id，为referenced。

当你想要显示文本的时候，在<tref>元素中使用xlink:href属性引用就可以啦。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <defs>  
    <text id="referenced">SVG 1</text>  
  </defs>

  <text>  
    <tspan x="280" y="80">  
      <tref xlink:href="#referenced"/>  
    </tspan>  
    <tspan x="280" dy="36" fill="red">SVG 2</tspan>  
  </text>  
</svg>

这里我在一个tref元素中引用了“SVG 1”的文本，而“SVG 2”放置在一个tspan中，放在“SVG 1”下面。

还有更高效的方法，设置defs来包含文本“SVG”，然后在第二个和第二个tspan中再额外加上数字1、2。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <defs>  
    <text id="referenced-2">SVG</text>  
  </defs>

  <text>  
    <tspan x="280" y="80">  
      <tref xlink:href="#referenced-2"/> 1  
    </tspan>  
    <tspan x="280" dy="36" fill="red">  
      <tref xlink:href="#referenced-2"/> 2  
    </tspan>  
  </text>  
</svg>

这里我在每个tspan中加上了1、2，但是SVG这个文本就是作为一个引用放进去的。我还把id改成了referenced-2，这样它就不会和前面的示例混淆了。

在这些示例中，我把tref放进了tspan中，tref还可以直接放在text元素中。引用的文本可以出现在任何tref元素出现的地方。

总结思考

如果你知道如何使用<defs>，以及如何重用SVG代码。我想你学习<tref>元素应该不会有任何困难的。

你可以在<defs>标签中定义你想要重用的文本，然后在<tref>元素中使用xlink:href来引用文本。解释比较麻烦，直接使用比较容易理解。

关于SVG文本还有很多内容。接下来的两周，我将讲讲关于SVG支持的文本布局特性，以及向你展示一些可以在水平和垂直方向排列对齐SVG文本的属性。