18.SVG tspan元素

• tspan示例

• 垂直定位

• 水平定位

• 为tspan元素添加样式

• 带基线偏移的上标和下标

SVG<tspan>元素用来绘制多行文本。<tspan>元素可以相对前一行文本定位，而不是必须绝对定位每行文本。用户还可以使用<tspan>元素一次选择并复制粘贴多行文本，而不仅仅是一个text元素。

tspan示例

下面是一个简单的<tspan>示例：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan>tspan line 2</tspan>
    </text>
</svg>

最终图片如下：

tspan line 1 tspan line 2

请注意<tspan>如何实现文本行相对于彼此定位的。

垂直定位

如果想让文本相对垂直定位，你可以使用dy属性（增量y）：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan dy="10">tspan line 2</tspan>
    </text>
</svg>

现在，第二行文本在第一行文本下面10像素的位置，因为第二个<tspan>元素的dy属性被设置为“10”，最终图片如下：

tspan line 1 tspan line 2

如果想让<tspan>元素以一个绝对的y坐标定位，你可以像<text>元素一样使用y属性。

如果你在dy属性中写多个数值，每个数值将会应用到<tspan>元素文本的多个字符上。示例代码如下：

<text x="10" y="15">
    <tspan dy="5 10 20">123</tspan>
</text>

最终图片如下。注意字形之间的垂直间距现在如何变化的。

123

水平定位

你可以使用dx属性（增量x）在x轴上将文本相对定位。下面的例子展示了将dx设置为30的效果。注意，第二行文本位于相对于第一行文本的结尾（不是开头）30像素的位置：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text x="20" y="15">
        <tspan>tspan line 1</tspan>
        <tspan dx="30" dy="10">tspan line 2</tspan>
    </text>
</svg>

最终图片如下：

tspan line 1 tspan line 2

如果你在dx属性中指定多个数值，每个数值将会应用到<tspan>元素中的每个字母上。示例如下：

<text x="10" y="20">
    <tspan dx="5 10 20">123</tspan>
</text>

最终图片如下：

123

你也可以设置x属性来固定文本行的x坐标。如果要显示左对齐的多行文本的列表，这是非常有用的。下面的例子将三行文本的x属性都设置为10：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text y="20">
        <tspan x="10">tspan line 1</tspan>
        <tspan x="10" dy="15">tspan line 2</tspan>
        <tspan x="10" dy="15">tspan line 3</tspan>
    </text>
</svg>

最终图片如下：

tspan line 1 tspan line 2 tspan line 3

为tspan元素添加样式

可以单独为<tspan>元素设置样式。因此你可以使用<tspan>元素为其设置不同于文本块中其它文本的样式。示例如下：

<text x="10" y="20">
    Here is a <tspan style="font-weight: bold;">bold</tspan> word.
</text>

最终图片如下：

Here is a bold word.

带基线偏移的上标和下标

你可以<tspan>元素的CSS属性baseline-shift创建上标和下标。下面的SVGbaseline-shift例子展示了实现方式：

<text x="10" y="20">
    Here is a text with <tspan style="baseline-shift: super;">superscript</tspan>
    and <tspan style="baseline-shift: sub;">subscript</tspan> mixed with normal
    text.
</text>

最终图片如下。写作的同时，Firefox（v22）不支持这个属性。

Here is a text with superscript and subscript mixed with normal text.