textpath元素必须绑定，不能直接用等图形；startoffset需配合text-anchor="middle"居中，且仅被支持，等引用会失效。
textPath 元素必须绑定 ，不能直接用 或
想让文字沿圆或矩形排布，却直接写 <circle id="myCircle"></circle> 然后在 <textpath href="#myCircle"></textpath> 里引用？这会完全失效。浏览器只认 <path></path> 元素的 id，其他图形元素（<circle></circle>、<rect></rect>、<ellipse></ellipse>）不被支持。
解决办法是把非路径图形转成 <path></path> 数据：
- 手写路径：圆可写成
<path d="M cx-r,cy A r,r 0 1,1 cx+r,cy A r,r 0 1,1 cx-r,cy"></path> - 用工具转换：张鑫旭的在线工具 https://www.php.cn/link/e030f4ce7b18cf7d8e835512b49f03e0 可粘贴任意 SVG 图形代码（比如
<circle cx="100" cy="100" r="50"></circle>），一键输出等效<path></path>字符串 - 导出时注意：Inkscape / Figma 导出 SVG 后，检查是否已自动转为
<path></path>—— 很多编辑器默认“轮廓化文字”或“路径化图形”才生成真正可用的d属性
startOffset 控制起始位置，但百分比值有隐含前提
startOffset="50%" 看似直观，实际依赖路径总长度计算。而 SVG 不会在渲染前主动测量路径长度，尤其当路径动态生成或含相对指令（小写 m、l、q）时，50% 可能偏移明显。
更稳妥的做法：
- 用绝对单位（如
startOffset="120"），配合 JS 主动获取长度：document.getElementById('myPath').getTotalLength() - 避免在动画中频繁读取
getTotalLength()，它触发重排；建议初始化时缓存 - 若路径含
z（闭合）且希望文字居中，startOffset="50%"多数情况可用，但需确保路径无冗余控制点或坐标抖动
CSS 动画改 startOffset 时，必须声明 animation-timing-function
直接写 @keyframes move { to { startOffset: 100%; } } 在大多数浏览器里不会动——因为 startOffset 不是标准 CSS 属性，CSS 动画引擎默认忽略它。
正确做法是用 offset-path + offset-distance 组合（现代方案），或退回 SMIL（兼容性好但已废弃）。如果坚持用 CSS 驱动 startOffset：
- 必须加
animation-timing-function: linear（或其他明确值），不能留空或用ease默认值 - 需搭配
animation-fill-mode: forwards防止回跳 - 仅 Chromium 内核稳定支持该写法；Firefox 和 Safari 基本不响应，生产环境慎用
React Native 中 TextPath 的 href 必须带 # 号且路径在同个 SVG 内
在 React Native SVG 库里写 <textpath href="myPath"></textpath>（漏掉 #）或把 <path></path> 放在另一个 <svg></svg> 组件里，都会导致文本不显示或报错 Cannot find path with id 'myPath'。
实操要点：
-
href值必须是#myPath，不能是myPath或/#myPath -
<path></path>和<textpath></textpath>必须包裹在同一个<svg></svg>标签下，跨组件引用无效 - 路径
id不能含空格、点号或斜杠，只建议用字母、数字、下划线 - 调试时可在
<path></path>上临时加stroke="red"确认路径是否绘制成功
最易被忽略的一点：路径的 d 指令中若有未闭合的子路径（比如多个 M 开头但没 Z），getTotalLength() 返回值可能异常，进而让 startOffset 行为不可预测。画完路径后，用在线工具校验 d 字符串合法性，比反复试错更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
