17.SVG text元素

SVG<text>元素用来在SVG图片中绘制文本。

SVG text视频

本篇教程的视频版如下：

Text示例

下面是一个简单的示例：

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

    <text x="20" y="40">Example SVG text 1</text>
</svg>

此例定义了一个位于x=10,y=40处的文本。文本内容是“Example SVG text 1”。

结果图片如下：

Example SVG text 1

Text定义

在深入了解SVG文本之前，最好先了解下面三个定义：

  • 字形

    字形是字母或符号的视觉表现。因为字母“a”有许多不同的视觉表现，所以我们可以使用多个不同的字形来绘制。

  • 字体

    字体是可以可视化一组字母和符号的字形集合。

  • 字符

    字符是字母或符号的数字（二进制）表示。一个字符可能需要1个或多个字节来表示。当计算机渲染字符时，它将这些字符映射到字体中的字形。

定位文本

文本的位置由<text>元素的x和y属性确定。属性x确定了在哪里定位文本的左侧边缘（文本的开始）。属性y确定了在哪里定位文本的底部（而不是顶部）。因此，文本的y坐标和线段、长方形或其它图形的y坐标不一样。下面这个例子展示了y坐标都为40的文本和线段：

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

    <text x="20"  y="40">Example SVG text 1</text>
    <line x1="10" y1="40" x2="150" y2="40" style="stroke: #000000"/>

</svg>

注意：文本的y位置是指文本的底部，而不是顶部。

文本锚点

文本锚点决定了文本的那个部分位于text元素x属性指定的x位置。其默认为文本的左侧边缘。也就是文本的开头。当然，你也可以使用文本的中间或右侧边缘——文本的结尾作为锚点。

你可以通过改变CSS属性text-anchor设置文本的锚点。它有三个值：start，middle和end。下面是一个展示text-anchor三个不同文本锚点选项的SVG图：

Start Middle End

垂直线展示了三个文本的X位置。所有三个文本的x="50"。你可以看到三个文本如何以不同的方式定位锚点。

上述三个文本的SVG代码如下所示：

<text x="50" y="20"
      style="text-anchor: start">
    Start
</text>
<text x="50" y="40"
      style="text-anchor: middle">
    Middle
</text>
<text x="50" y="60"
      style="text-anchor: end">
    End
</text>

文本描边和填充

和其它图形一样，文本也可以设置描边和填充。如果你只指定描边，文本只会显示其轮廓。如果只指定填充，文本看起来像正常呈现。下面是三个展示stroke和fill组合的例子：

Fill only Stroke only Fill and stroke

第一行文本只有填充。第二行只有描边。注意如何只绘制文本的轮廓。第三行包括描边和填充。注意如何将填充设置为灰色。

这里是上述图片的SVG代码：

<text x="20" y="40"
      style="fill: #000000; stroke: none; font-size: 48px;">
    Fill only
</text>
<text x="20" y="100"
      style="fill: none; stroke: #000000;  font-size: 48px;">
    Stroke only
</text>
<text x="20" y="150"
      style="fill: #999999; stroke: #000000;  font-size: 48px;">
    Fill and stroke
</text>

可以发现，为了更好的解释描边和填充的效果，我将font-size设置为48px。

当然，如果你想要更大的轮廓，也可以设置stroke-width属性。下面的例子将stroke-width设置为2：

Stroke-width 2

你可以在SVG stroke章节阅读更多关于如何设置文本（以及任何其它SVG形状）的描边样式。

你也可以在SVG fill、SVG渐变、SVG填充图案和SVG遮罩章节阅读更多关于如何填充文本。

字母间距和字距

使用样式属性letter-spacing和kerning可以控制字母间距和字距（字形间距）。我不知道哪个最好用。下面是两个简单的例子：

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

    <text x="20"  y="20" >Example SVG text</text>
    <text x="20"  y="40" style="kerning:2;">Example SVG text</text>
    <text x="20"  y="60" style="letter-spacing:2;">Example SVG text</text>
</svg>

结果图片如下：

Example SVG textExample SVG textExample SVG text

letter-spacing或kerning中使用的数值将被添加到正常的字母间距和字距。如果你使用负值，间距会缩小。

单词间距

你可以使用CSS属性word-spacing设置文本的词距。单词间距是文本中单词之前的空格数。示例如下：

<text x="20" y="20">
    Word spacing is normal
</text>
<text x="20" y="40"
      style="word-spacing: 4;">
    Word spacing is 4
</text>
<text x="20" y="60"
      style="word-spacing: 8;">
    Word spacing is 8
</text>

结果图片如下，注意：写作本文时，Firefox还不支持CSS属性word-spacing。

Word spacing is normal Word spacing is 4 Word spacing is 8

word-spacing属性指定的数值被添加到正常的词距中。如果你使用值normal或省略word-spacing属性，不会有任何效果。如果你指定了一个负数值，词距会缩小。

文本布局-无自动换行

SVG没有自动换行。你不得不自己定位文本并且换行。你可以从<tspan>元素的相对定位得到一些帮助。

你也可以沿着路径不布置文本，例如沿着圆形或样条。使用<textpath>元素可以完成。

旋转文本

可以像旋转其它SVG形状一样，旋转SVG文本。使用SVG 变换，示例如下：

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

    <text x="20"  y="40"
          transform="rotate(30 20,40)"
          style="stroke:none; fill:#000000;"
          >Rotated SVG text</text>
</svg>

图片如下：

Rotated SVG text

旋转由transform属性实现，在SVG 变换会对其作解释。

垂直文本

通过旋转文本可以展示垂直的文本，但是有另外一个方法展示垂直的文本。可以将CSS属性writing-mode设置为tb（从上到下）。写作的同时，Firefox（22）不支持此特性。

下面是一个SVGwriting-mode示例：

<text x="10" y="20" style="writing-mode: tb;">
    Vertical
</text>

结果图片如下：

Vertical

如果你想让字母不旋转，但是仍然垂直分布，你可以将CSS属性glyph-orientation-vertical设置为0。此属性设置了字形的旋转，默认为90。

下面是一些glyph-orientation-vertical的例子：

<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
    Vertical
</text>
<text x="110" y="10" style="writing-mode: tb; glyph-orientation-vertical: 90;">
    Vertical
</text>

结果图片如下：

Vertical Vertical

你也可以使用CSS属性letter-spacing调整字母间距。下面两个例子带有不同letter-spacing：

<text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
    Vertical
</text>
<text x="50" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;
                              letter-spacing: -3;">
    Vertical
</text>

下面是结果图片，可以发现，letter-spacing设置为负值的文本在字形之间具有较小的垂直间距。

Vertical Vertical

文本方向

你可以使用CSS属性direction设置文本渲染方向。direction属性有两个值：ltr和rtl。这些值分别表示“从左到右”和“从右到左”。你也必须将CSS属性unicode-bidi设置为bidi-override。

下面是SVG文本direction示例：

<text x="100" y="40" style="direction: rtl; unicode-bidi: bidi-override;">
    Left to right
</text>

此例子将CSS属性direction设置为rtl（从右到左）。结果图片如下：

Left to right

为文本添加样式

下面是为文本设置样式的特定于文本的CSS属性。请记住，你也可以为文本的stroke和fill添加样式，也可以用变换，图案和遮罩为文本添加样式。

你必须像下表一样，用小写属性名，否则SVG查看器会忽略它们。

下面是一个使用了上述某些属性的例子：

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

    <text x="20"  y="40"
          style="font-family: Arial;
                 font-size  : 34;
                 stroke     : #000000;
                 fill       : #00ff00;
                "
          >Styled SVG text</text>
</svg>

Styled SVG text

文本长度

你可以使用<text>元素的textLength属性设置文本的长度。然后通过调整字符间距和字形的大小，使文本的长度适应指定大小。使用lengthAdjust属性，你可以指定是否应该调整字母间距和字形大小。

下面是三个使用了SVGtextLength和lengthAdjust的例子：

<text x="5" y="20" textLength="140" lengthAdjust="spacing">
  A long, long, long text.
</text>
<text x="5" y="40" textLength="200" lengthAdjust="spacing">
    A long, long, long text.
</text>
<text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
    A long, long, long text.
</text>

这是最终图像，注意最后两个文本上不同类型的间距。

A long, long, long text. A long, long, long text. A long, long, long text.

写作本文时，Firefox还不支持这些属性。

相关SVG元素

以下SVG元素与<text>元素相关，这意味着它们也可以和文本一起使用（点击元素名称了解更多）：

上一页16.SVG marker元素下一页18.SVG tspan元素

最后更新于