上一篇文章中我们介绍了如何绘制svg文本，那么如何绘制多行文本呢？svg 的元素用于绘制svg多行文本。我们不必每行文本都使用绝对定位来排列制作多行文本，使用元素可以非常方便的使一行文本相对于另一行文本来定位。使用元素还可以使用户在同一时间里选择和复制多行文字。

 tspan示例

<svg>
  <text>
      <tspan>tspan line 1</tspan>
      <tspan>tspan line 2</tspan>
  </text></svg>

下面是上面代码的返回结果：

注意上面的返回结果中，由于元素没有设置其它参数，默认情况下第二行文字会紧跟着第一行文字排列。

 垂直定位

如果你希望每一行文字都相对于前一行文字垂直定位，你可以在元素中使用dy属性（delta y）：

<svg>
  <text>
      <tspan>tspan line 1</tspan>
      <tspan>tspan line 2</tspan>
  </text></svg>

现在第二行文字会显示在第一行文字下方，距离为10像素。下面是上面代码的返回结果：

如果你希望元素在text中在垂直方向绝对定位某个指定的数值，可以设置元素的y属性。

如果你在属性中写了多个数字，那么每一个数字会被应用到元素的每一个字符上。看下面的例子：

<svg>
  <tspan>123</tspan></svg>

下面是返回结果，注意各个字符在垂直方向上的变化。

 水平定位

要使每一行文本在X轴方向上相对定位可以使用dx属性（delta x）。下面的例子展示了将dx的值设置为30的效果，现在第二行文字在水平方向上相对于第一行文字向右偏移了30像素。

<svg>
  <text>
      <tspan>tspan line 1</tspan>
      <tspan>tspan line 2</tspan>
  </text></svg>

如果你在属性中写了多个数字，那么每一个数字会被应用到元素的每一个字符上。看下面的例子：

<svg>
  <tspan>123</tspan></svg>

下面是返回结果，注意各个字符在水平方向上的变化。

你可以在元素设置x属性来修正元素的X坐标。使用这种方法你可以显示多行头部对齐的文字。来看下面的例子，x属性设置为10：

<svg>
  <text>
      <tspan>tspan line 1</tspan>
      <tspan>tspan line 2</tspan>
      <tspan>tspan line 3</tspan>
  </text></svg>

下面是上面代码的返回结果：

 为tspan元素添加样式

我们可以为元素添加样式，例如你可以将一个元素中的文字设置为加粗字体：

<svg>
  <text>
    这是一个被 <tspan>加粗</tspan> 的文字。
  </text></svg>

下面是上面代码的返回结果：

 通过baseline-shift设置上标和下标效果

你可以通过baseline-shift CSS属性将一个元素设置为上标或下标。看下面的例子：

<text>
    这是一个tspan元素的 <tspan>上标</tspan>
    和 <tspan>下标</tspan> 混合的文本串效果。
</text>

效果如下：

以上就是SVG基础|SVG TSPAN 元素的内容，更多相关内容请关注PHP中文网（www.php.cn）！