SVG文本

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

字符、字形和字体

  • 字符(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-familyfont-stylefont-weightfont-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=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值