×

SVG基础 | SVG tspan 元素

作者:Web前端之家2016.09.29来源:Web前端之家浏览:9445评论:0
关键词:html5SVG
微信公众号

微信公众号

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

600.png

tspan示例
<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="10">
      <tspan>tspan line 1</tspan>
      <tspan>tspan line 2</tspan>
  </text>
</svg>

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

tspan line 1tspan line 2

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

垂直定位

如果你希望每一行文字都相对于前一行文字垂直定位,你可以在<tspan>元素中使用dy属性(delta y):

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="10">
      <tspan>tspan line 1</tspan>
      <tspan dy="10">tspan line 2</tspan>
  </text>
</svg>

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

tspan line 1tspan line 2

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

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

<svg xmlns="http://www.w3.org/2000/svg">
  <tspan dy="5 10 20">123</tspan>
</svg>

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

123
水平定位

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

<svg xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="10">
      <tspan>tspan line 1</tspan>
      <tspan dx="30" dy="10">tspan line 2</tspan>
  </text>
</svg>
tspan line 1tspan line 2

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

<svg xmlns="http://www.w3.org/2000/svg">
  <tspan dx="5 10 20">123</tspan>
</svg>

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

123

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

<svg xmlns="http://www.w3.org/2000/svg">
  <text y="10">
      <tspan x="10">tspan line 1</tspan>
      <tspan x="10" dy="15">tspan line 2</tspan>
      <tspan x="10" dy="15">tspan line 3</tspan>
  </text>
</svg>

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

tspan line 1tspan line 2tspan line 3
为tspan元素添加样式

我们可以为<tspan>元素添加样式,例如你可以将一个<tspan>元素中的文字设置为加粗字体:

<svg xmlns="http://www.w3.org/2000/svg">
  <text y="10">
    这是一个被 <tspan style="font-weight: bold;">加粗</tspan> 的文字。
  </text>
</svg>

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

这是一个被加粗的文字。
通过baseline-shift设置上标和下标效果

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

<text x="10" y="20">
    这是一个tspan元素的 <tspan style="baseline-shift: super;">上标</tspan>
    和 <tspan style="baseline-shift: sub;">下标</tspan> 混合的文本串效果。
</text>

效果如下:

这是一个tspan元素的上标下标混合的文本串效果。
返回SVG教程目录

相关阅读:

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1475078400791.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 土工膜

    资深程序员就是不简单...

  • 大吨位油缸

    谷歌浏览器使用起来很快,没有乱七八糟的插件。www.sdlyxt.com...

  • Web前端之家

    可以加Q群...

  • 访客

    JS点击锚点实现平滑滚动能写一个备注呗,有点看不懂,谢谢...

  • alice

    试用了下,vee-validate挺好用的!...

  • 访客

    封装思路跟原生javascript基本差不多。...

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria