【前端SVG】图像中的文本
前言
在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本,另一种是SVG字体。关于后者我们将在教程的后面进行讲解,现在我们主要集中前者:写在图像中的文本。
text
text标签用于在画布中,放置任何的文字。
<text x="10" y="20">Hello</text>
文字的内容写在text标签体中,x和y分别代表文本在画布中显示的位置。
text-anchor
该属性用于设置文本从坐标点中的文本流方向,值分别是start、end、middle、inherit。从下面图中可以看到四种值的不同。
<text x="40" y="20" text-anchor="start">Hello</text>
<text x="40" y="50" text-anchor="end">Hello</text>
<text x="40" y="80" text-anchor="middle">Hello</text>
<text x="40" y="110" text-anchor="inherit">Hello</text>
fill
和其他图形一样,text也可以使用fill属性对主题进行颜色填充。也用引用渐变、图案进行填充。
<defs>
<linearGradient id="fillTest">
<stop offset="5%" stop-color="#fc5c7d" />
<stop offset="85%" stop-color="#6a82fb" />
</linearGradient>
</defs>
<text x="40" y="20" fill="red">Hello</text>
<text x="40" y="40" fill="green">Hello</text>
<text x="40" y="60" fill="#ee2">Hello</text>
<text x="40" y="80" fill="rgb(255,0,0)">Hello</text>
<text x="40" y="100" fill="url(#fillTest)">Hello</text>
stroke
同样,我们也可以给字体设置描边。
<defs>
<linearGradient id="strTest">
<stop offset="5%" stop-color="#00f260" />
<stop offset="85%" stop-color="#0575e6" />
</linearGradient>
</defs>
<text x="40" y="20" stroke="red">Hello</text>
<text x="40" y="40" stroke="green">Hello</text>
<text x="40" y="60" stroke="#ee2">Hello</text>
<text x="40" y="80" stroke="rgb(255,0,0)">Hello</text>
<text x="40" y="100" stroke="url(#strTest)">Hello</text>
tspan
该元素用来标记大块文本的子部分,它必须是一个text
元素或别的tspan
元素的子元素。一个典型的用法是把句子中的一个词变成粗体,突出重点。
<text x="10" y="20">
坐标:
<tspan font-weight="bold">
广州
</tspan>
</text>
tspan
标签还有以下几种属性:
属性 | 说明 |
---|---|
x | 为容器设置一个新绝对x 坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列,它们将一个一个地应用到tspan 元素内的每一个字符上。 |
y | 为容器设置一个新绝对y 坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列,它们将一个一个地应用到tspan 元素内的每一个字符上。 |
dx | 从当前位置,用一个水平偏移开始绘制文本。这里,你可以提供一个值数列,可以应用到连续的字体,因此每次累积一个偏移。 |
dy | 从当前位置,用一个垂直偏移开始绘制文本。这里,你可以提供一个值数列,可以应用到连续的字体,因此每次累积一个偏移。 |
<text x="10" y="20">
坐标:
<tspan x="10" y="20" font-weight="bold">
广州
</tspan>
</text>
属性 | 说明 |
---|---|
rotate | 把所有的字符旋转一个角度。如果是一个数列,则使每个字符旋转分别旋转到那个值,剩下的字符根据最后一个值旋转。 |
<text x="10" y="20">
<tspan rotate="18">
hello world
</tspan>
</text>
属性 | 说明 |
---|---|
textLength | 这是一个很模糊的属性,给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值,则允许渲染引擎精细调整字型的位置。 |
<text x="10" y="20">
<tspan x="10" y="20" textLength="80">
hello world
</tspan>
<tspan x="10" y="40" textLength="110">
hello world
</tspan>
<tspan x="10" y="60" textLength="140">
hello world
</tspan>
</text>
其他字体相关属性
下面这些属性可以在text
标签中直接设置成一个属性,或是在CSS
中声明。
属性 | 说明 |
---|---|
font-family | 设置文本的字体系列 |
font-style | 设置斜体文字的字体样式属性 |
font-weight | 设置字体的粗细 |
font-variant | 在小型大写字母和普通文本选项之间切换 |
font-stretch | 在给定字体的可选拉伸版本中切换 |
font-size | 设置文本的大小 |
font-size-adjust | 独立于字体的实际大小尺寸,调整其可视大小尺寸 |
kerning | 开启或关闭字体间距选项 |
letter-spacing | 设置你的文本中的字母与字母之间的间距 |
word-spacing | 设置你的文本中的单词与单词之间的间距 |
text-decoration | 设置/取消字体上的文本装饰 |
最后
本篇文章讲述了在SVG
中的关于文本标签的使用方法,及它的一些属性。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekji
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13