SVG：在textPath中实现文本两端对齐

马黑黑

<textPath> 元素允许文字沿着路径绘制，提供了灵活的文本布局方式。通过将 <textPath> 与 <path> 结合，可以实现文字沿曲线、折线或复杂路径的展示。需要注意的是：其一，textPath 的书写，P 要大写；其二，textPath 应作为 <text> 的子元素出现；其三，textPath 内可以使用 <tspan> 子文本以便精细修饰碎片化的文本样式。

以下是一个完整的 textPath 示例：

代码：

<svg width="400" height="200" style="border: 1px solid gray">
    <path id="path1" d="M20 20Q200 350,380 20" fill="none" stroke="tan" />
    <text fill="steelblue" style="font: bold 26px sans-serif">
        <textPath
            id="myTPath"
            href="#path1"
            lengthAjust="spacing"
            textLength="510">
                山长水阔知何处
        </textPath>
    </text>
</svg>

textPath 元素里两个属性 lengthAdjust 和 textLength 的设置是文本在路径上两端对齐的关键：

textPath ：文本拉伸形式，控制文本如何拉伸到 textLength 属性定义的长度，值有 spacing（默认，字母或汉字之间的空格可能会增大或缩小）和 spacingAndGlyphs（整个文本元素被拉伸到文本的方向）
textLength ：文本长度，定义文本在指定路径中的布局长度（但使用百分比时是以 SVG viewBox的宽度为参照）。

文本长度（textLength）一般与路径长度一致，路径长度可以使用 JS 的path.getTotalLength()方法获取。考虑到路径可能会随手改动，可以在 JS 中为 textPath 的 textLength 属性动态赋值，这样在 HTML 代码中的赋值可以略为随意：

myTPath.setAttribute('textLength', path1.getTotalLength());

另外，如果需要隐藏路径，可以将路径置入 <defs> 标签内，像这样：

<defs>
    <path id="path1" d="M20 20Q200 350,380 20" />
</defs>

【小结】实现文本路径上的文本两端分散对齐，核心在于配套使用两个属性，lengthAjust="spacing" 和 textLength="长度"，其中文本长度和文本所安置的路径的长度应保持大致一致。

梦江南

谢谢黑黑老师辛苦，学习了。

马黑黑

梦江南 发表于 2026-7-17 12:14
谢谢黑黑老师辛苦，学习了。

红影

路径长度可以使用 JS 的path.getTotalLength()方法获取。这个好，省得自己去赋值了， 因为本来不知道那个值是什么

红影

沿着路径绘制的文本很漂亮

杨帆

很实用的知识与方法，谢谢马老师深入浅出的讲解

请教马老师~属性 lengthAdjust的属性值：spacing与spacingAndGlyphs，在视角效果上的差异并不明显呀