textPath元素必须通过href引用defs中预定义的path，不能直接设d属性；startOffset控制起始位置需带单位；路径过短会裁剪文字；文字方向由路径切线决定，翻转需反转路径或水平镜像；浏览器兼容性差异明显。
textPath 元素必须配合 和 使用，不能直接写路径数据
很多人一上来就给 <textPath> 加 d 属性，结果文字根本不显示——<textPath> 本身不接受路径定义，它只通过 href（或旧版 xlink:href）引用一个已定义的 <path>。这个 <path> 必须放在 <defs> 里，或者在 <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"/>
</defs>
<text>
<textPath href="#curve">Follow the curve</textPath>
</text>
</svg>
文字默认从路径起点开始、沿路径正向排列，startOffset 可微调起始位置
startOffset 是控制对齐的关键属性，单位可以是像素、百分比或 em。默认值是 0，即路径最开头。设为 50% 就让文字居中对齐路径；设为 100% 则文字尾部刚好卡在路径终点。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
容易踩的坑：
-
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>引用它
Firefox 和 Safari 对 textPath 的支持存在细微差异，尤其是 startOffset 动画
Chrome 和 Edge 对 <textPath> 的渲染最稳定；Firefox 在某些 SVG 嵌套结构下会忽略 startOffset 动画；Safari（尤其 iOS 16 之前）不支持 textPath 上的 CSS 过渡（如 transition: startOffset 0.3s）。
实操建议：
- 需要动画时，改用 JS 动态更新
startOffset属性值（而非 CSS transition） - 避免在
<symbol>或<use>中复用带<textPath>的图形，Safari 可能丢失引用 - 路径坐标尽量用相对单位（如
viewBox配合百分比路径），避免绝对像素导致缩放失真
<textPath> 不在 <defs> 里预定义好，就等于没写。 
