SVG<tspan>
元素用来绘制多行文本。<tspan>
元素可以相对前一行文本定位,而不是必须绝对定位每行文本。用户还可以使用<tspan>
元素一次选择并复制粘贴多行文本,而不仅仅是一个text
元素。
下面是一个简单的<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>
元素以一个绝对的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>
元素为其设置不同于文本块中其它文本的样式。示例如下:
<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.