文本

在谈论 SVG 中的文本时，我们必须区分两个几乎完全独立的主题。一个是图像中文本的包含和显示，另一个是 SVG 字体。后者将在本教程的后面部分进行描述，而本页将重点介绍第一部分：将文本引入 SVG 图像。

基础知识

我们在示例介绍中看到，可以使用text元素将任意文本放入 SVG 文档中。

xml

<text x="10" y="10">Hello World!</text>

x和y属性决定文本在视口中的显示位置。属性text-anchor可以取值"start"、"middle"、"end"或"inherit"，决定文本从此点向哪个方向流动。属性dominant-baseline决定垂直对齐方式。

与形状元素一样，文本可以使用fill属性着色，并使用stroke属性赋予描边。两者也可以引用渐变或图案，这使得 SVG 中简单的文本着色功能与 CSS 2.1 相比非常强大。

<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
  <text>
    This is
    <tspan font-weight="bold" fill="red">bold and red</tspan>
  </text>

  <style>
    <![CDATA[
      text{
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

tspan元素具有以下自定义属性

x

为包含文本设置新的绝对x坐标。这会覆盖默认的当前文本位置。该属性还可以包含一个数字列表，这些数字逐一应用于tspan元素的单个字符。

dx

从默认当前位置开始，使用水平偏移量dx绘制文本。在这里，您也可以提供一个值列表，这些值应用于连续的字符，因此随着时间的推移累积偏移量。

同样，还有y和dy用于垂直位移。

rotate

将所有字符旋转此度数。数字列表使每个字符旋转到其相应的值，其余字符根据最后一个值旋转。

textLength

给出字符串的计算长度。这是一个比较模糊的属性，它旨在允许渲染引擎在它自己的测量文本长度不符合此处提供的长度时微调字形的放置。

textPath

此元素通过其href属性获取任意路径，并沿此路径对齐其环绕的字符。

html

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
  <text>
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_path">
      A curve.
    </textPath>
  </text>

  <style>
    <![CDATA[
      text{
        dominant-baseline: hanging;
        font: 28px Verdana, Helvetica, Arial, sans-serif;
      }
    ]]>
  </style>
</svg>

文本

基础知识

设置字体属性

其他与文本相关的元素

tspan

textPath