svg文本＜text＞详解

一、基本用法

在SVG中，text的基本用法如下：

<svg>
    <text x="20" y="20">svg文本text</text>
</svg>

其效果如下图所示：

 注意上图中红点的位置坐标即为(20,20)。

可以看到，默认情况下，text使用以下默认属性：

• 颜色：黑色
• 字体大小：16px
• 水平对齐：左对齐
• 垂直对齐：底基线

二、样式设置

可以对文字的颜色、字体、字体大小、是否粗体、是否有下划线、是否斜体等进行设置。需要注意的是，样式基本与html相同，除了color，svg中使用fill进行颜色设置。

<svg>
    <text x="20" y="20"
        style="font-family: '微软雅黑'; font-size: 24px; fill:red; font-weight:bold; text-decoration:underline;">svg文本text</text>
</svg>

其效果如下图所示：

 三、对齐方式

水平对齐的方式有三种，分别是左对齐、居中对齐、右对齐。其设置的属性是text-anchor，对应的值分别是start、middle、end。默认值是start。

居中对齐的代码如下：

<svg>
    <text x="100" y="100"
        style="text-anchor: middle; font-family: '微软雅黑'; font-size: 24px; fill:green; text-decoration:underline;">svg文本text</text>
</svg>

其效果如下图所示：

 另外，左对齐效果：

右对齐效果：

垂直对齐设置的属性是dominant-baseline，其情况比较复杂。可选值比较多，比较常用的是：hanging、ideographic、alphabetic、middle、central。

以下代码：

<svg>
    <text dominant-baseline="hanging" x="30" y="20">Hanging</text>
    <text dominant-baseline="ideographic" x="30" y="50">Ideographic</text>
    <text dominant-baseline="alphabetic" x="30" y="80">Alphabetic</text>
    <text dominant-baseline="middle" x="30" y="110">Middle</text>
    <text dominant-baseline="central" x="30" y="140">Central</text>       
</svg>

对应效果图：

 可以看到，hanging基本相当于上对齐。下对齐有ideographic和alphabetic两种，区别是ideographic基线在所有字母下方，而alphabetic在小写字母下方，注意到字母p漏出来了。central和ideographic和hanging的中间，而middle是alphabetic和hanging的中间。

四、多行文本

直接在<text>标签里输入内容，是做不到分行的，需要加入<tspan>标签。

<svg>
    <text x="100" y="30">
        <tspan x="100" y="30">line1 第一行</tspan>
        <tspan x="100" y="60">line2 第二行</tspan>
        <tspan x="100" y="90">line3 第三行</tspan>
    </text>
</svg>

效果如下图所示：

 五、获取选中内容

使用document.getSelection()获取选中的内容。以下代码：

var select = document.getSelection();
console.log(`起始行内容：${select.anchorNode.nodeValue}`);
console.log(`起始行开始位置：${select.anchorOffset}`);
console.log(`结束行内容：${select.focusNode.nodeValue}`);
console.log(`结束行开始位置：${select.focusOffset}`);

将会得到以下效果：

 六、空心文字

可以结合stroke和fill属性制作空心文字。

<svg>
    <text x="100" y="50" style="font-family:'微软雅黑'; font-size: 36px; stroke:red; fill:yellow;">svg文本text</text>
</svg>

效果如下图所示：

 七、文字路径

可以让文字沿一条曲线排列，如下：

<svg>
    <defs>
        <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
    </defs>
    <text x="10" y="100">
        <textPath xlink:href="#path1">svg文本text svg文本text</textPath>
    </text>
</svg>

效果如下：