一篇文章带你了解SVG 文本效果
2023-03-09 22:14:18 时间
一、前言
SVG <text>
二、基本文本
要绘制文本,使用<text>
例:
- <!DOCTYPE html>
- <html>
- <title>项目</title>
- <body style="background-color: aqua;">
- <h1>SVG Text</h1>
- <svg width="550" height="150">
- <g>
- <text x="40" y="23">Text: </text>
- <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ </text>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
代码解释
x:定义了文本左上角的位置 ,y:定义文本的顶部位置,width:定义宽度,height:定义高度。
fill:fill属性用于定义填充颜色。
三、旋转文字
用于创建旋转文本。
例:
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg height="100" width="200">
- <text x="0" y="15" fill="red" transform="rotate(30 20,40)">http://pdcfighting.com/</text>
- </svg>
- </body>
- </html>
运行后效果如下:
用法解释
x:定义左上角的位置。y:它定义顶部位置。width:定义宽度。height:定义高度。
fill:fill属性用于定义填充颜色。
四、多行文字
元素可以安排任何分小组与
例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg width="570" height="100">
- <g>
- <text x="40" y="23">Multiline Text: </text>
- <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/
- <tspan x="40" y="60" font-weight="bold">ddaad</tspan>
- </text>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
用法解释
x:定义左上角的位置。y:它定义顶部位置。width:定义宽度。height:定义高度。
fill:fill属性用于定义填充颜色。
五、超级链接文字
用于创建具有超级链接的文本
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg width="500" height="100">
- <g>
- <text x="20" y="10">Text as Link: </text>
- <a xlink:href="http://pdcfighting.com/" target="_blank">
- <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/</text>
- </a>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
六、路径上的文字
下面是SVG代码:
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
- <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
- </defs>
- <text x="10" y="100" style="fill:red;">
- <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
- </text>
- </svg>
- </body>
- </html>
运行效果如下:
七、总结
本文基于Html基础,详细的介绍了SVG中常见的文本效果,如何变换文字,如何在文本,如何添加文字超链接等等。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望对你学习有帮助。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的