SVG的<text>元素用于在SVG图像中绘制文本。

SVG文字视频

这是本教程的视频版本：

文字范例

这是一个简单的示例：

<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"。

文字定义

在深入探讨SVG文本之前，以下三个定义是很容易理解的：

• 字形字形是字母或者符号的视觉表示。因此，可以使用许多不同的字形来绘制字母" a"，因为字母" 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位置。默认情况下，文本的锚点是文本的左边缘。文本的开头。但是，我们也可以将文本的中间用作锚点，或者将右边缘用作文本的结尾。

我们可以设置text-anchorCSS属性来设置文本的锚点。它可以采用三个值："开始"，"中间"和"结束"。这是一个SVGtext-anchor示例，显示了三个不同的文本锚点选项：

仅填充仅描边填充和描边

垂直线显示所有三个文本的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>

文字描边和填充

像其他SVG形状一样，文本可以同时设置笔触和填充。如果仅指定笔划，则文本将显示为文本的轮廓。如果仅指定填充，则文本将看起来像正常渲染的文本。以下是显示"笔画"和"填充"组合的三个示例：

行程宽度2

文本的第一行仅具有填充集。第二行仅设置了笔划。注意如何仅绘制文本的轮廓。第三行同时设置了笔划和填充。注意填充颜色是灰色的。

这是用于生成此图像的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的示例：

SVG文本示例SVG文本示例SVG文本示例

我们可以了解更多有关如何在SVG笔划文本中设置文本笔划(以及其他SVG形状)的样式的信息。

我们还可以阅读有关如何在SVG填充文本中以及在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>

字间距为正常字间距为4字间距为8

"字母间距"或者"字距调整"中使用的数字值将添加到常规字母间距或者字距调整中。如果使用负数，则间距将减小。

字间距

我们可以使用word-spacingCSS属性设置文本的单词间距。单词间距是文本中单词之间的空白量。这是一个例子：

<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>

旋转的SVG文字

在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>

旋转是由" transform"属性引起的，这在SVG转换中进行了说明。

垂直文字

通过旋转文本可以显示垂直文本，但是还有另一种显示垂直文本的方法。我们可以通过将CSS的Writing-mode属性设置为tb(从顶部到底部)来实现。在撰写本文时，Firefox(22)不支持此函数。

这是一个SVGwrite-mode示例：

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

这是结果图像：

垂直垂直

如果我们希望字母不旋转而出现，但仍彼此垂直放置，可以通过将CSS的" glyph-orientation-vertical" CSS属性设置为0来实现。此属性设置字形的旋转度。默认值为90。

这是一些"字形方向垂直"示例：

<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>

我们也可以使用letter-spacingCSS属性来调整字母间距。这是两个具有不同"字母间距"的示例：

<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>

这是生成的图像。请注意，带有负"字母间距"的文本在字形之间的垂直间距较小。

文字方向

我们可以使用" direction" CSS属性设置文本的显示方向。方向属性可以采用两个值：ltr和rtl。这些值表示"从左到右"和"从右到左"。我们还必须将" unicode-bidi" CSS属性设置为" bidi-override"。

这是一个SVG文本" direction"示例：

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

本示例将" direction" CSS属性设置为" rtl"(从右至左)。

样式文字

这是可用于设置文本样式的特定于文本的CSS属性的列表。请记住，我们还可以设置文本的笔触和填充样式，也可以使用渐变，填充图案和遮罩来设置文本样式。

我们必须像在表中那样以小写形式编写属性名称，否则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>

很长很长的文字。很长很长的文字。很长很长的文字。

文字长度

我们可以使用 <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>

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

相关SVG元素

以下SVG元素与 <text>元素相关，这意味着它们也可以与文本一起使用(单击元素名称以了解更多信息)：

• <tspan>
• <tref>
• <textpath>