渡理成神一篇做前端的，很少有不跟文本路径打交道的时刻，只是很多人没意识到它叫文本路径而已。你把标题排成一道弧线，做成圆环 Logo，或者让一句话沿着一条不规则波浪线展开，这都不是 CSS 的 flex 或者 grid 能直接解决的问题。CSS、JavaScript、文本路径这几个词放在一起，真正的主角其实是 SVG 的 <textPath>，JavaScript 负责动态生成路径、控制动画和交互。这篇文章我会把一路摸索下来最实用的 8 个代码片段整理出来，每个都能单独粘贴到项目里跑，也会解释到底为什么要这么写，方便你根据自己的场景改出想要的效果。
想动手的读者也不用有压力，不需要背 SVG 语法，只要照着片段复制，再把路径和文字内容换掉就行。更适合谁看呢？一个是做活动页、宣传 Banner、个人主页设计的前端；另一个是刚接触 SVG 动效、想给静态页面加点质感的初学者。下面我先从原理上理一遍文本路径的结构关系，再进入真正的片段实战。
1. 文本路径这件事，到底应该归谁管
CSS 里处理文本对齐有整排、两端对齐，JavaScript 里做逐字定位也不复杂。但一旦要让文字沿任意一条平滑曲线走，就涉及“曲线上的逐字排版”这个需求。纯粹用 CSS 逐字符通过 transform 旋转位移去拼，计算量大，浏览器缩放还容易出锯齿，并不划算。
1.1 为什么首选 SVG 而不是 Canvas 和 WebGL
文本路径的核心机制在 SVG 里是现成的，也就是大家常说的 <textPath>。先有路径，再把文字挂到路径上。在这种结构里，路径只是“轨道”，文字是“列车”，列车的方向和间距会自动沿着轨道走，不需要你手动算每个字的 x、y 坐标。这意味着你在 CSS 里可以正常继承 font-family、font-size、color，浏览器也会保留文本语义，搜索引擎能读得到，文字还能被选中复制，这个优势比 Canvas 渲染文本强很多。
Canvas 虽然也有 fillText 配 measureText 实现曲线文字的能力，一切都得手写字母间距和旋转角度，代码复杂度会指数上升。WebGL 更不现实，字体解析和排版工作量太大。所以只要目标是“创意文本路径”，我的默认方案就是 SVG，让 CSS 负责外观，JavaScript 负责路径动态更新，两者各管各的，职责清楚。
1.2 JavaScript 在文本路径里到底扮演什么角色
有人会问，一个 <textPath> 标签就能搞定文本路径，为什么还要加 JavaScript？原因很直接：静态路径是写死的，但你在真实项目里遇到的可能是曲线随数据变化、文字位置随滚动移动、路径需要按鼠标拖动重算。这个时候路径 .d 属性必须被动态改写，JavaScript 就登场了。
更典型的是你不知道 target path 是什么样的。比如想让文字贴在一段波形图上，手写贝塞尔控制点纯靠蒙，大概率会歪。更好的办法是给 JavaScript 一个公式，让它根据频率、振幅、相位生成路径点坐标，再拼接成 d 字符串。这套思路在第八个片段里会展开，先有个概念就行：CSS 负责视觉层，SVG 负责结构层，JavaScript 负责数据层，三者凑齐才能做出灵活的创意文本路径效果。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 8 个代码片段逐个拆解
下面我会按照从易到难的顺序给出代码片段。每个片段我会保持极简，去掉多余装饰，方便你看到核心逻辑。粘贴到本地 HTML 文件里可以直接看效果，不需要任何构建工具。
2.1 片段1：第一次把文字放到一条曲线上
先建立直觉。最基础的文本路径只需要三步：定义一个 <path>，定义一个 <text>，在 <text> 内部放一个 <textPath> 指向路径。
html复制<svg viewBox="0 0 600 200" width="600" height="200">
<defs>
<path id="myPath" d="M 20 170 C 140 50, 300 50, 580 130" fill="none" />
</defs>
<text font-size="24" fill="#333" font-family="system-ui, sans-serif">
<textPath href="#myPath">从明天起，做一个沿曲线走位的人</textPath>
</text>
</svg>
d 里的 C 是三次贝塞尔曲线，后面两个坐标点控制的分别是曲线两端的控制点。你把 140 50 和 300 50 改大改小，曲线的弯曲方向就会跟着变。这里有个新手最容易疑惑的点：为什么路径要放在 <defs> 里？因为 <textPath> 只是“引用”路径，路径不一定非要在 <defs> 里，但放在那里更规范，避免路径本身被渲染出来。实际项目里如果路径不想显示，也不需要用 CSS 隐藏，直接把 fill="none" 写上就行。
提示：
<textPath>的文字会从路径起点开始排列。路径方向是从左到右，文字就会按照阅读方向正常横向铺开；如果你把路径方向反过来写成从右到左，文字就会自动左右翻转。
2.2 片段2：把文字精确居中对齐到路径顶点
实际设计里，很少有人需要文字从头排到尾。更多图像是一个弧线上方居中放一个短标题。此时要用一个我很常用的组合：startOffset="50%" + text-anchor="middle"。
html复制<svg viewBox="0 0 500 300" width="500" height="300">
<defs>
<path id="arcPath" d="M 50 240 C 100 90, 400 90, 450 240" fill="none" />
</defs>
<text font-size="32" fill="#c2410c" font-family="serif" text-anchor="middle">
<textPath href="#arcPath" startOffset="50%">愿你走出半生，归来仍是少年</textPath>
</text>
</svg>
重点解释一下 startOffset：它决定文字从路径的哪个位置开始画，可以用百分比，也可以用具体单位。设成 50%，文字就整体挪到路径中点附近。`t