TEXT EFFECT
路径文字Text Path
文字沿贝塞尔曲线排布，自带弧形节奏，是 SVG textPath 的典型用法。ReactBits 的 Text Path 组件即此。
效果预览
适合用在哪
徽章/印章文案、圆环 logo 周围的品牌名、需要流动感的标题装饰。
容易踩的坑
- 曲率过大时字符间距在弯道内侧挤压重叠，超过 20 字就很难读。
- SVG 未设 viewBox 只写死宽高，移动端缩放后文字会被裁切。
- 多个 SVG 用了相同的 path id，textPath 会引用到错误的曲线。
设计提示词 · Prompt
路径文字（Text Path）：用 SVG 承载。先在 <defs> 里定义一条 <path>（如 M8 56 C 46 8, 130 8, 168 56），再在 <text> 里用 <textPath href="#id" startOffset="4"> 引用它，文字就会沿路径排布。字号 15-24px、字重 700、fill 用主题正文色，letter-spacing 略微放大（0.01em）让弧线上更透气。可选给文字加 text-anchor="middle" 与 startOffset="50%" 做居中。路径本身设 fill:none 不显示。
Text Path: rendered with SVG. First define a <path> in <defs> (e.g. M8 56 C 46 8, 130 8, 168 56), then reference it inside <text> with <textPath href="#id" startOffset="4">, and the text will flow along the path. Font size 15-24px, font weight 700, fill in the theme's body text color, with letter-spacing slightly enlarged (0.01em) so it breathes along the arc. Optionally add text-anchor="middle" and startOffset="50%" to center the text. Set fill:none on the path itself so it is not shown.
常见搭配
同一页面里经常和「路径文字」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<svg class="tx-path" viewBox="0 0 176 74">
<defs><path id="uiTxP" d="M8 58 C 46 8, 130 8, 168 58" fill="none"/></defs>
<text><textPath href="#uiTxP" startOffset="6">Text on a curve</textPath></text>
</svg>
</div>