svg 的 元素可将文字沿任意路径自然排列，需依赖带唯一 id 的预定义路径，通过 href 引用；用 startoffset 控制起始位置，method 和 spacing 调整方向与间距；现代浏览器原生支持。
SVG 的 <textpath></textpath> 元素能将文字沿任意路径（如圆弧、贝塞尔曲线）自然排列，是 HTML5 中实现专业级曲线文字排版的核心方案。关键不在于“能不能”，而在于路径定义是否精准、文本对齐与起始偏移是否可控。
路径必须预先定义且具备唯一 ID
<textpath></textpath> 本身不绘制路径，它依赖外部已定义的 <path></path>、<circle></circle> 或 <ellipse></ellipse> 等元素，并通过 xlink:href（SVG 1.1）或 href（SVG 2.0+）引用其 id。路径不可内联，ID 不可重复。
- ✅ 正确写法（SVG 2.0+）：
<path id="curve" d="M100,200 Q200,100 300,200"></path><textpath href="#curve">弯曲的文字</textpath> - ⚠️ 常见错误：漏写
id、ID 拼写不一致、路径未闭合却误以为影响文字渲染（实际不影响）
控制文字起点位置用 startOffset
默认文字从路径起点开始排列。使用 startOffset 属性可整体平移文字在路径上的起始位置，支持像素值（如 "20"）、百分比（如 "50%"）或长度单位（如 "1em"）。
- 想让文字居中对齐路径？设
startOffset="50%"即可 - 想预留左侧空白？设
startOffset="10%"或startOffset="30" - 负值不被支持；超出路径总长的部分文字会被截断（非隐藏）
文字方向与翻转靠 method 和 spacing
<textpath></textpath> 默认按路径切线方向逐字旋转，但可通过属性微调视觉效果：
-
method="align"（默认）：文字基线严格贴合路径几何形状，适合平滑曲线 -
method="stretch"：强制拉伸文字以填满整条路径（慎用，易失真） -
spacing="auto"（默认）：自动计算字间距；设为"exact"可禁用自动调整，配合letter-spacing手动控制 - 若文字上下颠倒，检查路径方向（顺时针/逆时针）或添加
text-anchor="middle"+dominant-baseline="middle"配合调整
兼容性与实用技巧
现代浏览器（Chrome/Firefox/Safari/Edge 79+）均原生支持 <textpath></textpath>，无需 Polyfill。注意两点：
- 在 HTML 中嵌入 SVG 时，确保
<svg></svg>标签有明确宽高，避免文字因容器塌陷不可见 - 路径过于尖锐（如小半径锐角）可能导致文字局部重叠或断裂，建议用
Q或C命令绘制平滑贝塞尔曲线 - 调试时可在路径上临时加
stroke="red" fill="none"查看实际轨迹
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
