讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > H5教程 >

正文

0

0

SVG基础|SVG TSPAN 元素

PHP中文网

PHP中文网

发布时间：2016-05-17 09:07:29

|

3218人浏览过

|

来源于php中文网

原创

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

 tspan示例


  
      tspan line 1
      tspan line 2

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

933.png

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

 垂直定位

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


  
      tspan line 1
      tspan line 2

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

934.png

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

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


  123

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

935.png

 水平定位

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


  
      tspan line 1
      tspan line 2

936.png

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

Trickle AI
Trickle AI

多功能零代码AI应用开发平台

下载 

  123

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

937.png

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


  
      tspan line 1
      tspan line 2
      tspan line 3

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

938.png

 为tspan元素添加样式

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


  
    这是一个被 加粗 的文字。

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

939.png

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

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


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

效果如下：

940.png

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

相关文章

H5页面如何实现表单数据验证功能 前端表单验证的完整解决方案

H5页面如何实现滚动视差特效 炫酷视差滚动效果实现指南

零基础如何学习 H5 前端开发

做 H5 前端动画的开发工具有哪些

学习 H5 前端开发需要掌握的设计原则有哪些

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jQuery超酷3D包装盒封面旋转特效 下一篇：HTML5实现手势屏幕解锁

作者最新文章

小米笔记本重装系统的方法

2024-07-12 05:54

Thinkpad如何重装系统

2024-07-12 05:55

Nvidia控制面板显示设置不可用怎么办

2024-07-15 13:06

美颜相机怎么做海报

2024-07-15 13:06

美颜相机怎么贴纸遮脸脸

2024-07-15 13:09

美颜相机扣款怎么关掉

2024-07-15 13:10

如何开通拼多多

2024-07-15 13:10

拼多多开店如何选品类

2024-07-15 13:12

拼多多是如何成立的

2024-07-15 13:13

是大事

2024-12-27 16:41

热门AI工具

更多
DeepSeek

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台
豆包大模型

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型
通义千问

通义千问

阿里巴巴推出的全能AI助手

AI大模型
腾讯元宝

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格
文心一言

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作
讯飞写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具
即梦AI

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成
ChatGPT

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI大模型

PC软件

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术，涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例，帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码，并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程，阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容，阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集，阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程，阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法，阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程，阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享，阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法，重点覆盖 pprof 的使用方式，包括 CPU、内存、阻塞与 goroutine 分析，火焰图解读，常见性能瓶颈定位思路，以及在真实项目中进行针对性优化的实践技巧。通过案例讲解，帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
SVG剪裁路径和遮罩jQuery幻灯片
新年快乐喇叭闪烁动画特效
创意的元素周期表ui布局特效
液态的表单元素ui动画特效
基于SVG路径运动的js轮播插件pathslider
简易的天气图标svg动画
SVG预览图变形切换幻灯片特效

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 4.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

JavaScript
JavaScript

共185课时 | 20.1万人学习

最新文章

更多
H5页面如何实现全屏滚动效果 全屏滚动H5实现方法大全
H5页面如何实现动态内容加载效果 3种动态加载技术让你的H5页面活起来
H5页面制作中如何提升页面安全性 H5安全防护的10个必备措施
H5页面如何实现背景音乐循环播放 背景音乐无缝循环播放技术
H5页面制作中如何设计高点击率按钮 提升按钮点击率的7个技巧
H5页面如何实现自动轮播图效果 轮播图自动切换实现方案
H5页面如何实现跨平台适配方案 一套代码适配多端的关键方法解析
H5页面制作中如何管理多语言切换 多语言国际化实现完整流程
H5页面制作中如何适配不同分辨率屏幕 多分辨率适配终极方案
H5页面制作中如何嵌入地图定位服务 主流地图API接入方法详解
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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

  • PHP学习

  • 技术支持

  • 返回顶部