使用tspan元素给SVG文本添加样式、定位

tspan元素


你可以把<tspan>元素当成SVG文本的span。你可以用<tspan>来包裹SVG文本，来对它们做整体控制，关于显示和定位，文本片段之间的相互关系等。


我们从一个简单的示例开始。


<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <text x="240" y="120">  
    <tspan>SVG</tspan>  
    <tspan>SVG</tspan>  
  </text>  
</svg>
这里大多数的代码对你来说应该是熟悉的，在阅读了前面两篇文章之后。我创建了一个<svg>元素，定义了SVG视窗的尺寸，添加了一个红色的边框，这样我们可以看到它的边界。我还把font-size设置为2em，以及overflow: visible;，这样我们可以看到视窗之外的内容。


我在(240,120)的位置放置了一个text元素，里边有两个tspan，每个都包含了内容为SVG的文本。效果如下：

tspan中的文本按照内联顺序排列，和它们直接在text元素中显示的一样，中间有个空格。


有一点非常有趣的是，可以给<text>元素添加的属性也都可以添加给<tspan>元素。


我们来改变一下第二个tspan的位置，通过设置x和y坐标。这样我们可以把两个tspan分开。


<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">  
  <text x="240" y="120