文本
当谈论 SVG 中的文本时，我们必须区分两个几乎完全独立的主题。一个是图像中文本的包含和显示，另一个是 SVG 字体。后者将在教程的后续部分中介绍，而本页将重点关注第一部分：将文本引入 SVG 图像。
基础知识
我们在 入门示例 中已经看到，text 元素可用于在 SVG 文档中放置任意文本。
xml
<text x="10" y="10">Hello World!</text>
x 和 y 属性决定文本在视口中的位置。text-anchor 属性，其值可以是 "start"、"middle"、"end" 或 "inherit"，决定了文本从该点流动的方向。dominant-baseline 属性决定了垂直对齐方式。
与形状元素一样，文本可以使用 fill 属性着色，并使用 stroke 属性描边。两者都可以引用渐变或图案，这使得 SVG 中的文本着色非常强大。
设置字体属性
文本的一个重要部分是显示它的字体。SVG 提供了一组属性，其中许多与其 CSS 对应项相似，用于启用字体选择。以下每个属性都可以作为属性设置，或通过 CSS 声明设置：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、letter-spacing、word-spacing 和 text-decoration。
其他与文本相关的元素
tspan
此元素用于标记较大文本的子部分。它必须是 text 元素或另一个 tspan 元素的子元素。一个典型的用例是将句子中的一个单词显示为粗体红色。
html
<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
<text>
This is
<tspan font-weight="bold" fill="red">bold and red</tspan>
</text>
<style>
<![CDATA[
text {
dominant-baseline: hanging;
font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]>
</style>
</svg>
tspan 元素具有以下自定义属性
textPath
此元素通过其 href 属性获取任意路径，并沿着该路径排列其所包含的字符。
html
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" href="#my_path">
A curve.
</textPath>
</text>
<style>
<![CDATA[
text {
dominant-baseline: hanging;
font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]>
</style>
</svg>