编辑这个页面须要登录或更高权限！

SVG <tspan>元素

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 line 1tspan line 2

注意<tspan>结果如何导致文本行相对于彼此（彼此之后）定位。

垂直定位

如果希望将线垂直相对放置，可以使用dy 属性（delta 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>
测试看看‹/›

现在，由于dy第二个<tspan>元素的属性设置为“ 10” ，因此第二行文本显示在第一行文本下方10个像素处 。这是结果图像：

tspan line 1tspan line 2

如果要将<tspan>元素定位 在绝对y位置y ，请像对待<text>元素一样使用属性。

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

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
        <text x="10" y="15">
            <tspan dy="5 10 20">
                123
            </tspan>
        </text>
    </svg>
测试看看‹/›

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

123

水平定位

要将文本相对定位在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>
测试看看‹/›

这是结果图像：

tspan line 1 tspan line 2

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

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
    <tspan dx="5 10 20">123</tspan>
</text></svg>
测试看看‹/›

这是结果图像：

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> 元素来设置文本块的样式，以使其不同于其余文本。这是一个示例：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"><text x="10" y="20">
    Here is a <tspan style="font-weight: bold;">bold</tspan> word.
</text></svg>
测试看看‹/›

这是结果图像：

Here is aboldword.

基线偏移的上标和下标

您可以使用baseline-shiftCSS属性使用<tspan>元素创建上标和下标 。这是一个SVG baseline-shift示例，显示了如何：

<svg width="500" height="100">    
<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>    
</svg>
测试看看‹/›

这是生成的图像。(注意:firefox可能不支持)

Here is a text withsuperscriptandsubscriptmixed with normal        text.

SVG <tref>元素SVG <text> 文本