您的位置：首页 > Web前端 > CSS

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

2017-05-09 10:08 736 查看

SVG的

<text>

元素允许你很简单地定位和给文本添加样式，但是如果你想要针对文本的不同部分定位和添加样式呢？难道我们要去创建多个

text

元素吗？不需要的。有更简单的方式，

tspan

来拯救世界了。

前两周我们已经看了SVG

text

元素，并整理了几个我们可以使用的属性。

<text>

元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合

<text>

元素使用的SVG元素——

<tspan>

和

<tref>

。

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

的文本。效果如下：

SVG SVG

tspan

中的文本按照内联顺序排列，和它们直接在

text

元素中显示的一样，中间有个空格。

有一点非常有趣的是，可以给

<text>

元素添加的属性也都可以添加给

<tspan>

元素。

我们来改变一下第二个

tspan

的位置，通过设置

和

坐标。这样我们可以把两个

tspan

分开。

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

我把第二个

tspan

移到了

(10,10)

的位置。因为

和

都是绝对定位，SVG
2的位置就移到了视窗的左边缘，也就是上边缘的下方。

SVG 1SVG 2

你可能记得上一篇文章中我们提到了

坐标表示的是基线的位置，不是文本的顶部或底部，而是在中间的一个位置。

为了相对定位，我们可以在下面的实例中使用

dx

和

dy

来定位。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10">SVG 2</tspan>
</text>
</svg>

这里我在第二个

tspan

中使用了

dy

坐标列，这样每个字符都是相对于前一个字符定位的。

SVG 1SVG 2

对于上面的第一个字符“S”，如果没有给定

dx

和

dy

，那就是相对整个文本的位置定位的。

因为每个

tspan

都是单独的元素，除了定位之外，你还可以在给

tspan

里面的文本添加样式。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="240" y="120">
<tspan>SVG 1</tspan>
<tspan dx="50,10,10,0,5" dy="50,10,10,10" fill="red">SVG 2</tspan>
</text>
</svg>

这里我给

SVG 2

添加了一个红色的填充，默认填充是黑色。把它当成一个普通的

span

，唯一的不同就是它只能在

<text>

元素中使用。

SVG 1SVG 2

你可以直接在另一个

tspan

下方放置另一个

tspan

，通过给它们相同的

值，然后给第二个

tspan

一个

dy

值。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80">
<tspan>SVG 1</tspan>
<tspan x="280" dy="24" fill="red">SVG 2</tspan>
</text>
</svg>

这里我设置的第二个

tspan

的

属性值和

text

元素相同，然后再设置了

的

dy

值，这样它就显示在第一个

tspan

下方了。

注意：除了

dy

，也可以使用

来进行设置。

SVG 1SVG 2

我们上周看的所有可以应用于

text

的属性都可以用于

tspan

。但是，有一件需要注意的事情是，所有设置给

text

元素的属性都会传播到

tspan

元素中。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan>SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>

这里我把

text

元素旋转了10度，你可以看到所有

tspan

中的内容也都旋转了10度，但是我没有明确地给

tspan

设置旋转。

SVG 1SVG 2

这并不奇怪，如果你想让第一个

tspan

的内容正常显示，不要额外给它设置旋转

-10

。如果设置了就会变成下面这样。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="-10">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>

给

tspan

的

rotate

属性，会覆盖掉我们原来给

text

设置的

rotate

。

SVG 1SVG 2

如果你想让它正常直立起来，直接给

tspan

设置

rotate="0"

即可。

<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;">
<text x="280" y="80" rotate="10">
<tspan rotate="0">SVG 1</tspan>
<tspan x="280" dy="36" fill="red">SVG 2</tspan>
</text>
</svg>

这样第一个

tspan

的内容就直立了。

SVG 1SVG 2

还有几个我们将要学习的属性，还有

tref

元素，但是我们今天先讲到这里。

总结

SVG的

tspan

元素，功能上类似于普通的HTML

span

元素。通过包裹成一个

tspan

，你可以对这部分文本进行操作，添加样式、定位，它和其它文本是独立开来的。

所有

text

元素可用的属性，

tspan

也都可以用，如

fill

和

stroke

，还有很多其它的属性。

所有你给

text

元素应用的属性，都会传播到

tspan

元素中。如果你不希望继承某个属性值，你可以在

tspan

中给它设置新的值，覆盖掉原来

text

元素中的值。

下周，我会继续讲讲

textLength

和

lengthAdjust

属性的内容，然后会介绍

<tref>

元素，它可以帮助我们在重用SVG文本，跨不同的

text

和

tspan

元素。

本文根据@Steven Bradley的《How
To Style and Position SVG Text With The tspan Element》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://vanseodesign.com/web-design/svg-text-tspan-element/。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/svg/svg-text-tspan-element.html © w3cplus.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： svg

相关文章推荐

新的分享

章节导航