登录  /  注册
首页 > web前端 > H5教程 > 正文

SVG基础|SVG TSPAN 元素

PHP中文网
发布: 2016-05-17 09:07:29
原创
2651人浏览过

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

 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>
登录后复制

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

933.png

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

垂直定位

如果你希望每一行文字都相对于前一行文字垂直定位,你可以在元素中使用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像素。下面是上面代码的返回结果:

934.png

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

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

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

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

935.png

水平定位

要使每一行文本在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>
登录后复制

936.png

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

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

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

937.png

你可以在元素设置x属性来修正元素的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>
登录后复制

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

938.png

为tspan元素添加样式

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

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

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

939.png

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

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

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

效果如下:

940.png

以上就是SVG基础|SVG TSPAN 元素的内容,更多相关内容请关注PHP中文网(www.php.cn)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号