前端必知必会 | 学SVG看这篇就够了（八）-一一网

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

这是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	设置/取消字体上的文本装饰