textpath元素必须通过href引用defs中预定义的path，不能直接设d属性；startoffset控制起始位置需带单位；路径过短会裁剪文字；文字方向由路径切线决定，翻转需反转路径或水平镜像；浏览器兼容性差异明显。
textPath 元素必须配合 和 使用，不能直接写路径数据
很多人一上来就给 <textpath></textpath> 加 d 属性，结果文字根本不显示——<textpath></textpath> 本身不接受路径定义，它只通过 href（或旧版 xlink:href）引用一个已定义的 <path></path>。这个 <path></path> 必须放在 <defs></defs> 里，或者在 <textpath></textpath> 之前声明。
常见错误现象：<textpath d="M0,0 Q50,50 100,0">hello</textpath> 完全无效；浏览器静默忽略。
正确做法：
<svg viewbox="0 0 200 100"><defs><path id="curve" d="M10,50 Q100,10 190,50"></path></defs><text><textpath href="#curve">Follow the curve</textpath></text></svg>
文字默认从路径起点开始、沿路径正向排列，startOffset 可微调起始位置
startOffset 是控制对齐的关键属性，单位可以是像素、百分比或 em。默认值是 0，即路径最开头。设为 50% 就让文字居中对齐路径；设为 100% 则文字尾部刚好卡在路径终点。
容易踩的坑：
-
startOffset="50"（无单位）会被当作 50 像素，不是 50% —— 必须写"50%" - 路径太短而文字太长时，超出部分会被裁剪（不报错），需提前估算或用
textLength+lengthAdjust压缩/拉伸文字 - 如果路径有尖锐折角，文字可能在拐点处扭曲变形，建议用平滑贝塞尔曲线（
Q或C指令）
文字方向受 path 的走向影响，flip 或 rotate 无法直接翻转文字朝向
文字始终“面向”路径的切线方向：路径向上拱，文字底边朝上；路径向下凹，文字底边朝下。你不能靠 transform="rotate(180)" 把整段文字倒过来——那只会把字形旋转，但依然贴着原路径方向“趴”着，看起来像被拧弯了。
真正可控的方式只有两个：
- 反转路径定义顺序（比如把
M10,50 Q100,10 190,50改成M190,50 Q100,10 10,50），让文字反向行走 - 用
writing-mode="tb"+glyph-orientation-vertical="0"强制竖排（仅适用于垂直路径场景） - 更稳妥的做法：复制一份路径，用
transform="scale(-1,1) translate(-200,0)"水平翻转后重新定义，再让<textpath></textpath>引用它
Firefox 和 Safari 对 textPath 的支持存在细微差异，尤其是 startOffset 动画
Chrome 和 Edge 对 <textpath></textpath> 的渲染最稳定；Firefox 在某些 SVG 嵌套结构下会忽略 startOffset 动画；Safari（尤其 iOS 16 之前）不支持 textPath 上的 CSS 过渡（如 transition: startOffset 0.3s）。
实操建议：
- 需要动画时，改用 JS 动态更新
startOffset属性值（而非 CSS transition） - 避免在
<symbol></symbol>或<use></use>中复用带<textpath></textpath>的图形，Safari 可能丢失引用 - 路径坐标尽量用相对单位（如
viewBox配合百分比路径），避免绝对像素导致缩放失真
<textpath></textpath> 不在 <defs></defs> 里预定义好，就等于没写。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
