SVG <tspan>元素用于在SVG中绘制多行文本。不必绝对定位每行文本， <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>是如何导致文本行相对于彼此放置的(彼此之间)。

垂直定位

如果要使线垂直相对放置，可以使用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>元素放置在绝对的y位置，请使用y属性，就像使用<text>元素一样。

如果我们在dy属性中写入多个数字，则每个数字将应用于元素<tspan>中的文本字符。这是一个例子：

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

这是生成的图像。请注意，字形之间的垂直间距现在是如何变化的。

水平定位

要在x轴上相对放置文本，可以使用dx属性(delta 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>

如果我们在dx属性中指定了多个数字，则每个数字将应用于元素<tspan>中的每个字母。这是一个例子：

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

我们还可以设置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元素

可以分别设置 <tspan>元素的样式。因此，我们可以使用<tspan>元素来设置文本块的样式，使其与其余文本不同。这是一个例子：

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

具有基线偏移的上标和下标

我们可以使用baseline-shift CSS属性创建带有<tspan>元素的上标和下标。这是一个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>