textPath必须绑定<path>元素，不能直接引用<circle>等非路径图形；浏览器只认<path>的id，其他元素即使带id也会静默失效，文字回退为水平排版。
textPath 必须绑定 元素，不能直接引用 或
浏览器只认 <path> 的 id，其他图形元素（<circle>、<ellipse>、<rect>）即使带了 id，<textPath href="#xxx"> 也会静默失效——文字回退为普通水平排版，控制台不报错。
常见错误写法：
-
<circle id="myCircle" cx="100" cy="100" r="50"></circle>+<textPath href="#myCircle">文字</textPath>→ 完全不弯曲 - 路径未声明在 SVG 内部，比如用 CSS 的
clip-path或外部 SVG 文件定义 →<textPath>无处可绑
正确做法是把非路径图形转成 <path>：
- 手写圆路径：
<path id="myCircle" d="M50,100 A50,50 0 1,1 150,100 A50,50 0 1,1 50,100 Z"></path> - 用张鑫旭的在线工具（https://www.php.cn/link/e030f4ce7b18cf7d8e835512b49f03e0）粘贴
<circle>或<rect>代码，一键输出等效d属性 - Figma / Inkscape 导出前勾选“导出为路径”或“轮廓化”，避免保留原始图形标签
href 值必须带 # 且拼写严格一致
<textPath> 的 href 是硬绑定，大小写、空格、符号都影响解析。写错就回退到默认渲染，毫无提示。
立即学习“前端免费学习笔记（深入）”；
典型失败场景：
-
href="myPath"（缺#）→ 绑定失败 -
href="#myPath "（末尾有空格）→ 不匹配，路径 ID 实际是myPath -
href="#MyPath"（大小写不一致）→ ID 是myPath，但写了大写 M - 路径定义在
<defs>外但未同级 → DOM 顺序错乱导致引用不到
建议写法：
- 路径定义放在 SVG 开头或
<defs>内，确保先于<text>出现 - ID 全小写、无特殊字符，如
id="curve-path" -
href值复制粘贴自 ID，避免手敲
startOffset 百分比依赖路径总长，动态路径需谨慎
startOffset="50%" 看似让文字居中，但它实际是「路径总长度 × 0.5」的位置。而 SVG 渲染时并不预计算路径长度——尤其当 d 属性含相对指令（如 q、t、小写字母命令）或 JS 动态生成路径时，浏览器可能用近似值估算，导致偏移不准。
实操要点：
- 静态路径可用
startOffset="50%"+text-anchor="middle"实现视觉居中 - 动态更新路径后，
<textPath>不会自动重算，必须强制重绑：改href值（如加个空格再删掉），或移除重建整个<textPath>元素 - 避免用
transform: scale()缩放路径——它改坐标但不改逻辑长度，startOffset计算基准错乱 - 文字过长时超出部分被裁剪，不是隐藏；想适配可用
textLength+lengthAdjust="spacing"
DOM 结构必须是 <text> → <textPath> 直接嵌套
<textPath> 必须是 <text> 的**直接子元素**。任何中间层级（比如 <tspan>、<g>、甚至注释节点）都会导致绑定中断。
错误结构示例：
-
<text><tspan><textPath href="#p">文字</textPath></tspan></text>→ 失效 -
<text><!-- 注释 --><textPath href="#p">文字</textPath></text>→ 失效（注释也算子节点）
正确结构只有一层：
<text> <textPath href="#curve">弯曲的文字</textPath> </text>
另外注意：<textPath> 本身不绘制路径，所以路径要显式设置 fill="none" stroke="..." 才能看到轨迹；但即使不画线，只要 <path> 存在且 ID 正确，文字就能贴合。
