SVG文本

最新推荐文章于 2024-07-31 16:50:09 发布

Meskjei

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量750

点赞数 1

分类专栏：前端文章标签： SVG 文本

本文链接：https://blog.csdn.net/hjc256/article/details/94446676

版权

本文介绍了SVG中的文本处理，包括字符、字形和字体的概念，详细讲解了text元素的位置设定、文本偏移、旋转及长度调整。通过示例解析了dx、dy、rotate和textLength属性的使用，并探讨了tspan元素在组织文本结构中的作用。

摘要由CSDN通过智能技术生成

文章目录

字符、字形和字体
- EM框
text元素

字符、字形和字体

字符（characters）：要展示的字母的数字表示形式，每个字符都由特定的unicode定义。
- A：01000001
- a：0110000
字形（Glyphs）：字符的可视化表示形式，即显示出来的单个字
字体（Fonts）：字形的集合

字形和字体表被称为字体数据。

EM框

在这里插入图片描述

Ascent：从字体的(0,0)点到EM框顶部的距离
Descent：从字体的(0,0)点到EM框顶部的距离
Baseline table：设计空间坐标系统中的基线的位置。

text元素

在一个SVG文档中，<text>元素内部可以放任何的文字，例如：<text>Hello World</text>

字体的属性如同CSS，例如：font-family、font-style、font-weight、font-size等等。

与CSS不同的地方在于，这些属性直接写在<text>标签内。例如：<text font-size="13px">Hello World</text>。

注意在为<text>设置字体属性时可以加上单位。

文本的位置

x=“0” y=“0”

<svg width="200" height="50" style="outline: 1px solid red; overflow:auto; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text>http://www.imooc.com</text>
</svg>

在这里插入图片描述

x=“x1 x2 x4 x5… xn” y=“x1 y2 y4 y5… yn”

<svg width="200" height="50" style="outline: 1px solid red; overflow: visible; position: absolute; top:50%; left:50%; margin-left: -100px;" xmlns="http://www.w3.org/2000/svg">
    <text x="10 20 30 40 50 60 70 80 90 100" y=