SVG 文本

简介

SVG 中有两种文本模式:

  • 一种是写在图像中的文本
  • 一种是 SVG 字体

SVG文字三个概念

  • Glyphs:字母或符号的视觉表现。例如字母“a”有多种不同的视觉表现方式,所以可以使用不同的 glyphs 来绘制它;
  • Fonts:是 glyphs 的集合,可以用于表现一组字母或符号;
  • Characters:代表一个字母或符号的二进制数字。一个 character 可以使用1个或多个字节来表示。

<text> 元素

<text> 元素定义了由文本组成的图形,渐变、图案、剪切路径、蒙板和过滤器也可以应用在 <text> 元素之上,下面就主要属性进行说明:

文本位置
使用属性(x,y)设置文字显示位置。

实例:
在位置(80,20)显示文字

<svg version="1.1" width="200" height="30" xmlns="http://www.w3.org/2000/svg">
    <text x="80" y="20" fill="green">文字位置</text>
</svg>

效果:

文本对齐
属性 text-anchor 控制文本的方向,包含下面的值:

说明
start 向开始位置对齐
middle 向中间位置对齐
end 向结束位置对齐
inherit 继承父元素对齐方式

实例:

<svg version="1.1" width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <text x="80" y="20" text-anchor="start" fill="green">向左对齐</text>
    <text x="80" y="40" text-anchor="middle"  fill="green">中间对齐</text>
    <text x="80" y="60" text-anchor="end" fill="green">向右对齐</text>
</svg>

效果:

字体
属性 font-family 设置字体,font-size 设置大小:

说明
family-name 字体名,可以多个,用逗号分开,第一个不成功则尝试下一个
inherit 继承父元素

实例:

<svg version="1.1" width="400" height="80" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-family="Times New Roman" font-size="18" fill="green">这一段的字体是 Times New Roman.</text>
</svg>

效果:

字体样式
属性 font-style 设置字体样式,包含下面的值:

说明
normal 默认值
italic 文件的斜体,需要文字支持
oblique 将文字倾斜(如果文字不支持斜体,可以使用这个属性值)

实例:

<svg version="1.1" width="400" height="80" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50" font-family="Times New Roman" fill="green">这一段的字体是 Times New Roman.</text>
</svg>

效果:

下划线
使用 text-decoration 属性设置下划线样式,包含下面的值:

说明
none 默认值
overline 顶部线
line-through 中间线
underline 底部线

实例:

<svg version="1.1" width="400" height="70" xmlns="http://www.w3.org/2000/svg">
    <text x="20"  y="20" fill="green" text-decoration="overline">TXTech is a technology website.</text>
    <text x="20"  y="40" fill="green" text-decoration="line-through">TXTech is a technology website</text>
    <text x="20"  y="60" fill="green" text-decoration="underline">TXTech is a technology website</text>
</svg>

效果:

文字长度
使用 textLength 属性设置文字的长度;
使用 lengthAdjust 属性你可以指定是否同时调整字符间距和符号的宽度,包含2个属性值;

说明
spacing 只调整字符间距(默认值)
spacingAndGlyphs 同时调整字符间距和符号的宽度

实例:

<svg version="1.1" width="400" height="100" xmlns="http://www.w3.org/2000/svg">
    <text x="20"  y="20" fill="green" textLength="300" lengthAdjust="spacing">
        TXTech is a technology website</text>
    <text x="20"  y="40" fill="green" textLength="300" lengthAdjust="spacingAndGlyphs">
        TXTech is a technology website</text>
    <text x="20"  y="60" fill="green" textLength="100"
          lengthAdjust="spacing">TXTech is a technology website</text>
    <text x="20"  y="80" fill="green" textLength="100"
          lengthAdjust="spacingAndGlyphs">TXTech is a technology website</text>
</svg>

效果:

间距

属性 说明
letter-spacing 属性设置字母间距,如果是负数值,字母间距将会收缩
word-spacing 属性设置单词间距,如果是负数值,单词间距将会收缩

实例:

<svg version="1.1" width="400" height="150" xmlns="http://www.w3.org/2000/svg">
    <text x="20"  y="20" fill="green">TXTech is a technology website.</text>
    <text x="20"  y="40" fill="green" letter-spacing="5">TXTech is a technology website</text>
    <text x="20"  y="60" fill="green" letter-spacing="-5">TXTech is a technology website</text>
    <text x="20"  y="80" fill="green" word-spacing="5">TXTech is a technology website</text>
    <text x="20"  y="100" fill="green" word-spacing="-5">TXTech is a technology website</text>
</svg>

效果:

字体权重
使用 font-weight 属性设置字体权重,包含下面的值:

说明
normal 默认值
bold 粗体
bolder 更加粗
100~900 粗细值,400 等同于 normal,700 等同于 bold

实例:

<svg version="1.1" width="220" height="260" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="20" font-weight="bold" fill="green">粗细值 bold</text>
    <text x="20" y="40" font-weight="bolder" fill="green">粗细值 bolder</text>
    <text x="20" y="60" font-weight="100" fill="green">粗细值 100</text>
    <text x="20" y="80" font-weight="200" fill="green">粗细值 200</text>
    <text x="20" y="100" font-weight="300" fill="green">粗细值 300</text>
    <text x="20" y="120" font-weight="400" fill="green">粗细值 400</text>
    <text x="20" y="140" font-weight="500" fill="green">粗细值 500</text>
    <text x="20" y="160" font-weight="600" fill="green">粗细值 600</text>
    <text x="20" y="180" font-weight="700" fill="green">粗细值 700</text>
    <text x="20" y="200" font-weight="800" fill="green">粗细值 800</text>
    <text x="20" y="220" font-weight="900" fill="green">粗细值 900</text>
    <text x="20" y="240" font-weight="normal" fill="green">粗细值 normal</text>
</svg>

效果:

小型大写字母
使用 font-variant 属性设置小型大写字母字体(Small Caps);所谓 “小型大写” 就是,即与小写字母一样高,外形与大写字母保持一致。

说明
normal 显示标准的字体
small-caps 显示小型大写字母的字体
inherit 从父元素继承 font-variant 属性的值

实例:

<svg version="1.1" width="300" height="50" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="20" font-variant="normal" fill="green">TXTech is a technology website.</text>
    <text x="20" y="40" font-variant="small-caps" fill="green">TXTech is a technology website.</text>
</svg>

效果:

描边和填充
通过 fill、stroke 和 stroke-width 等属性设置填充和描边:

实例:

<svg version="1.1" width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <text x="20"  y="40" fill="green" font-size="30">Fill only</text>
    <text x="20"  y="70" fill="none" stroke="green" stroke-width="1" font-size="30">Stroke only</text>
    <text x="20"  y="100" fill="yellow" stroke="green" stroke-width="1" font-size="35">Fill and stroke</text>
</svg>

效果:

变换文本
SVG transform 属性同样支持文本变换,可以参考:SVG 变换
实例:

<svg version="1.1" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="20" fill="green" transform="rotate(30 20,20)" font-size="20">TXTech is a technology website</text>
    <text x="20" y="40" fill="blue" transform="translate(20,140)" font-size="20">TXTech is a technology website</text>
    <text x="20" y="40" fill="black" transform="scale(0.5)" font-size="20">TXTech is a technology website</text>
    <text x="20" y="40" fill="red" transform="skewX(45)" font-size="20">TXTech is a technology website</text>
    <text x="20" y="40" fill="red" transform="skewY(45)" font-size="20">TXTech is a technology website</text>
    <text x="20" y="40" fill="red" transform="skewX(20) skewY(20)" font-size="15">TXTech is a technology website</text>
</svg>

效果:

<tspan> 元素

使用 <tspan> 子元素绘制多行文本,使用 <tspan> 元素可以非常方便的使一行文本相对于另一行文本来定位。还可以在同一时间里选择和复制多行文字。

属性 说明
x,y 绝对位置
dx,dy x轴和y轴偏移量相对位置,如果使用坐标列,则每个字符都是相对于前一个字符定位的

实例:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20" fill="green">
    <tspan>multi-line 1</tspan>
    <tspan x="20" dy="20">multi-line 2</tspan>
    <tspan x="20" dy="20">multi-line 3</tspan>
    <tspan dx="10" dy="20">multi-line 4</tspan>
    <tspan x="20" dy="20 25 30">abcd</tspan>
    <tspan x="20" dy="20" dx="5 10 15">abcd</tspan>
    <tspan x="20" dy="20" dx="5 10 15 20">abcd</tspan>
</text>
</svg>

效果:

<textPath> 元素

在 <text> 标签里面放入 <textPath> 标签并且使用 xlink:href=”myPath” 属性引用路径;

<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="myPath" d="M 20,20 C 40,220 50,100 300,100" fill="none" stroke="red"/>
    <text fill="green" font-size="20" word-spacing="10">
        <textPath xlink:href="#myPath">TXTech is a technology website</textPath>
    </text>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注