纯CSS无法实现文字沿任意路径（如圆形）排布，必须使用SVG的<textPath>绑定<path>元素；CSS的offset-path兼容性差且功能不全，transform逐字摆放则导致基线歪斜、响应式失控等问题。
纯 CSS 无法让文字真正按任意路径（包括圆形）排布，textPath 是 SVG 原生能力，CSS 只能辅助样式和动画，不能替代路径绑定逻辑。
为什么不能只用 CSS 实现路径文字
很多人试过 transform: rotate() + 绝对定位逐字摆放，结果发现：文字基线歪斜、换行失效、缩放后错位、响应式下完全失控。这不是“近似”，而是根本没走对技术路径——浏览器渲染引擎里，只有 <textPath> 能把字符坐标映射到 SVG 路径的弧长参数上。CSS 的 offset-path 属性虽在部分浏览器支持，但兼容性差（Chrome 仅限 offset-rotate + motion-path，且不适用于文本），且无法处理多字符对齐、自动间距等核心需求。
必须用 <path>，不能用 <circle>
<textPath> 的 href 属性只接受 <path> 元素的 id，不识别 <circle>、<ellipse> 或其他形状元素。即使你写 <circle id="myCircle">，href="#myCircle" 也会静默失败。
- 画圆弧推荐用
A命令，例如下半圆：d="M 100,200 A 100,100 0 0,1 300,200"（注意第四个参数0表示小弧，1表示大弧） - 完整圆需两段
A拼接，或用arc工具生成精确值 - 起始点
M x,y必须和你期望文字开始的位置一致，否则startOffset很难调准
startOffset 和 text-anchor 必须配对使用
单独设 startOffset="50%"，文字仍是左对齐贴在路径中点；单独设 text-anchor="middle"，文字会以自身中心为锚点从路径起点开始排布，整体偏左。两者缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
startOffset="50%"：让文字序列的「中点」对齐路径的「中点」 -
text-anchor="middle"：作用于<textPath>内部，使该中点成为文字自身的中心锚点 - 若文字过长超出路径长度，不会自动截断或折行，只会溢出——这时得手动缩短文本、调小
font-size，或增大路径半径
响应式下最容易被忽略的坑：viewBox 宽高比
用 width: 100% 或 vw 设置 SVG 尺寸时，如果没固定 viewBox，缩放会导致圆变椭圆、文字挤压变形。正确做法是：
- 设定明确的
viewBox="0 0 400 400"（宽高比 1:1） - 所有路径坐标基于 viewBox 内单位（如像素）书写，避免混用
px和百分比 - CSS 中只控制 SVG 容器尺寸（
width/height），不碰d属性里的数值
路径方向也会影响文字朝向——顺时针 vs 逆时针绘制的圆，文字基线可能上下翻转，这不是 bug，是 SVG 弧线命令定义决定的，必要时可反转 M 和终点坐标顺序来修正。
