svg文本＜text＞详解

最新推荐文章于 2024-05-13 09:00:24 发布

还是叫明

最新推荐文章于 2024-05-13 09:00:24 发布

阅读量1.4w

点赞数 3

分类专栏：前端文章标签：前端 javascript svg text

本文链接：https://blog.csdn.net/lweiyue/article/details/125776515

版权

前端专栏收录该内容

15 篇文章 3 订阅

订阅专栏

本文详细介绍了SVG中的文本元素用法，包括基本用法、样式设置、对齐方式、多行文本、获取选中内容、空心文字及文字路径等。通过示例代码展示了如何设置字体、颜色、对齐、垂直基线以及如何实现文字沿路径排列等效果。

摘要由CSDN通过智能技术生成

一、基本用法

在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>

效果如下：