必须用<textPath>+预定义<path>且href指向其id；<circle>等非路径元素无法被引用，否则文字不显示，因浏览器仅支持<path>的id作为<textPath>目标。
直接说结论：在 index.html 中实现文字沿路径排列，必须用 <textPath> + 预定义 <path>，且 href 必须指向该 <path> 的 id；<circle>、<rect> 等图形元素不能被 <textPath> 直接引用，否则文字不显示。
为什么 <textPath href="#myCircle"> 无效
浏览器只接受 <path> 元素的 id 作为 <textPath> 的目标。即使你写了 <circle id="myCircle">，<textPath href="#myCircle"> 也会静默失败——没有报错，但文字完全不渲染。
- 必须手写等效
<path>：比如圆要转成d="M cx-r,cy A r,r 0 1,1 cx+r,cy A r,r 0 1,1 cx-r,cy" - Inkscape / Figma 导出 SVG 时，勾选“将形状转为路径”或“轮廓化”，否则导出的仍是
<circle> - 在线工具如张鑫旭的 SVG 路径转换器可一键把
<circle cx="100" cy="100" r="50">拆成可用的<path d="...">
startOffset 值不准？别全信百分比
startOffset="50%" 看似合理，但它的计算依赖路径总长度，而 SVG 不会在解析时主动测量——尤其当路径含相对指令（小写 m、l、q）或动态生成时，50% 可能明显偏移。
- 更可靠的做法是用绝对单位：
startOffset="120"，配合 JS 初始化时缓存长度：document.getElementById('myPath').getTotalLength() - 避免在 CSS 动画中频繁调用
getTotalLength()，它触发重排，性能差 - 如果路径含
z（闭合）且结构干净，startOffset="50%"多数情况可用，但上线前务必实测不同缩放比例下的对齐效果
CSS 动画改 startOffset 为什么不动
直接写 @keyframes move { to { startOffset: 100%; } }，大多数浏览器根本不会执行动画——因为 startOffset 不是标准 CSS 属性，原生不支持 CSS 插值。
立即学习“前端免费学习笔记（深入）”；
- Chromium 内核（Chrome/Edge）部分支持，但需显式声明
animation-timing-function: linear，不能留空 - Firefox 和 Safari 基本无视该动画，文字静止不动
- 生产环境推荐替代方案：
offset-path+offset-distance（需把文字包进<div>或<g>，再用块级元素驱动），或用 JS +requestAnimationFrame手动更新startOffset属性
最容易被忽略的一点：所有路径必须在同一个 <svg> 容器内，跨 <svg> 的 id 引用（哪怕 ID 相同）会失效；React 或框架项目里还要注意组件作用域是否隔离了 ID 空间。
