搜索
首页web前端H5教程SVG基础|SVG TSPAN 元素

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

 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

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

 垂直定位

如果你希望每一行文字都相对于前一行文字垂直定位,你可以在4d04eeddb7e8b41623612fd2b0fd5728元素中使用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

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

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

<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

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

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

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

937.png

你可以在4d04eeddb7e8b41623612fd2b0fd5728元素设置x属性来修正28f128881ce1cdc57a572953e91f7d0f元素的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元素添加样式

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

<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属性将一个4d04eeddb7e8b41623612fd2b0fd5728元素设置为上标或下标。看下面的例子:

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


声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何使用视口元标记来控制移动设备上的页面缩放?如何使用视口元标记来控制移动设备上的页面缩放?Mar 13, 2025 pm 08:00 PM

本文讨论了使用视口元标记来控制移动设备上的页面缩放,重点是宽度和初始尺度之类的设置,以获得最佳响应和性能。

如何将音频添加到我的HTML5网站上?如何将音频添加到我的HTML5网站上?Mar 10, 2025 pm 03:01 PM

本文解释了如何使用&lt; audio&gt;元素,包括用于格式选择的最佳实践(MP3,OGG Vorbis),文件优化和JavaScript控件用于播放。 它强调使用多个音频f

如何使用HTML5和JavaScript创建互动游戏?如何使用HTML5和JavaScript创建互动游戏?Mar 10, 2025 pm 06:34 PM

本文使用JavaScript详细介绍了创建Interactive HTML5游戏。 它涵盖了游戏设计,HTML结构,CSS样式,JavaScript逻辑(包括事件处理和动画)以及音频集成。 必需的JavaScript库(Phaser,Pi

如何将HTML5表单用于用户输入?如何将HTML5表单用于用户输入?Mar 10, 2025 pm 02:59 PM

本文解释了如何创建和验证HTML5表格。 它详细介绍了&gt;元素,输入类型(文本,电子邮件,编号等)和属性(必需,模式,最小,最大)。 HTML5的优势比旧方法形成

如何使用HTML5页面可见性API检测页面何时可见?如何使用HTML5页面可见性API检测页面何时可见?Mar 13, 2025 pm 07:51 PM

本文讨论了使用HTML5页面可见性API来检测页面可见性,提高用户体验并优化资源使用情况。关键方面包括暂停媒体,减少CPU负载以及基于可见性变化管理分析。

如何使用地理位置API处理用户位置隐私和权限?如何使用地理位置API处理用户位置隐私和权限?Mar 18, 2025 pm 02:16 PM

本文讨论了使用GeOlocation API管理用户位置隐私和权限,并强调要求权限,确保数据安全性并遵守隐私法律的最佳实践。

如何将HTML5拖放API用于交互式用户界面?如何将HTML5拖放API用于交互式用户界面?Mar 18, 2025 pm 02:17 PM

本文介绍了如何使用HTML5拖放API来创建交互式用户界面,详细介绍了使元素可拖动的步骤,处理关键事件并通过自定义反馈来增强用户体验。它还讨论了一个常见的陷阱

如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信?如何使用HTML5 Websockets API进行客户端和服务器之间的双向通信?Mar 12, 2025 pm 03:20 PM

本文解释了HTML5 Websockets API,用于实时双向客户服务器通信。 它详细详细介绍了客户端(JavaScript)和服务器端(Python/Flask)的实现,以应对可伸缩性,状态管理,一个挑战

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具