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