SVG <text> 文本终极实战手册（2025 版）
2025 年前端最爱用的不是 <div> 里的文字，而是 SVG 里的 <text> —— 因为它能弯曲、环形、路径贴合、逐字动画、完美对齐图标，还永远清晰无锯齿！
1. 核心语法（就 4 个最常用属性）
<text x="坐标" y="坐标" font-size="大小" fill="颜色">这里写文字</text>| 属性 | 必备 | 2025 常用值 | 备注 |
|---|---|---|---|
| x / y | 是 | 100、50%、数组（如 x=”10 30 50″） | 多个值 = 逐字符定位 |
| font-size | 强烈推荐 | 14、16、1.2em、2rem | SVG 里默认没有继承，用就写死 |
| fill | 强烈推荐 | currentColor、#fff、渐变 | 决定文字颜色 |
| text-anchor | 常用 | start（默认） / middle / end | 水平居中就写 middle |
| dominant-baseline | 常用 | middle / central / hanging | 垂直居中就写 middle |
2. 2025 年最常用的 15 种写法（直接复制）
<!-- 1. 最基础文字 -->
<text x="100" y="50" font-size="32" fill="#333">Hello SVG</text>
<!-- 2. 完美居中文本（2025 标配） -->
<text x="150" y="100" font-size="28" fill="currentColor"
text-anchor="middle" dominant-baseline="middle">
居中文字
</text>
<!-- 3. 环形文字（最火！） -->
<defs>
<path id="circle" d="M10,100 A90,90 0 1,1 190,100 A90,90 0 1,1 10,100"/>
</defs>
<text font-size="20" fill="#ff6b6b" font-weight="bold">
<textPath href="#circle" startOffset="5%">
● 环形文字就是这么丝滑 ● 环形文字就是这么丝滑
</textPath>
</text>
<!-- 4. 波浪形文字（手绘感拉满） -->
<defs>
<path id="wave" d="M0,80 Q50,40 100,80 T200,80 T300,80"/>
</defs>
<text font-size="36" fill="#0066ff" font-weight="bold">
<textPath href="#wave">波浪形文字真好看</textPath>
</text>
<!-- 5. 逐字出现动画（2025 loading 神器） -->
<text x="10" y="100" font-size="48" fill="#ff5a5f" font-weight="bold">Loading...
<animate attributeName="opacity" values="0;0;1" keyTimes="0;0.8;1" dur="3s" repeatCount="indefinite"/>
<tspan opacity="0">L<animate attributeName="opacity" begin="0.1s" values="0;1" dur="0.01s" fill="freeze"/></tspan>
<tspan opacity="0">o<animate attributeName="opacity" begin="0.2s" values="0;1" dur="0.01s" fill="freeze"/></tspan>
<!-- 依次类推 -->
</text>
<!-- 6. 文字描边（霓虹/空心字） -->
<text x="150" y="100" font-size="60" font-weight="bold"
fill="none" stroke="#00f5ff" stroke-width="3"
text-anchor="middle" dominant-baseline="middle">
NEON
</text>
<!-- 7. 文字渐变 -->
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="#ff8a00"/>
<stop offset="100%" stop-color="#da1b60"/>
</linearGradient>
</defs>
<text x="150" y="100" font-size="72" fill="url(#grad)" font-weight="bold"
text-anchor="middle" dominant-baseline="middle">
渐变文字
</text>
<!-- 8. 图标 + 文字完美垂直居中一行 -->
<svg viewBox="0 0 200 40">
<path d="M8 20 L12 16 L12 24 Z" fill="currentColor"/>
<text x="25" y="20" font-size="18" fill="currentColor" dominant-baseline="middle">设置</text>
</svg>3. 2025 必杀技巧速查表
| 需求 | 神技代码 | 备注 |
|---|---|---|
| 文字完美居中 | text-anchor="middle" dominant-baseline="middle" | 2025 标配！ |
| 文字能随主题变色 | fill="currentColor" | 暗黑模式自动切换 |
| 环形文字自动匀速旋转 | <textPath startOffset> + <animate> | 见上面示例 |
| 文字转路径（可填充图案） | 用 Inkscape 或 https://svg-text-to-path.netlify.app | 超高级效果 |
| 逐字/逐行动画 | <tspan> + <animate> | 最自然的手写感 |
| 文字打字机效果 | textLength + lengthAdjust + animate | 超丝滑 |
4. 2025 最火的三个实战神器
<!-- 神器1：360°环形进度 + 文字 -->
<svg viewBox="0 0 200 200">
<path d="M100,10 A90,90 0 1,1 100,190 A90,90 0 1,1 100,10" fill="none" stroke="#eee" stroke-width="12"/>
<path d="M100,10 A90,90 0 1,1 100,190 A90,90 0 1,1 100,10" fill="none" stroke="#ff6b6b" stroke-width="12"
stroke-dasharray="565.48" stroke-dashoffset="141.37"/> <!-- 75% -->
<text x="100" y="100" font-size="48" fill="#333" text-anchor="middle" dominant-baseline="middle" font-weight="bold">
75%
</text>
</svg>
<!-- 神器2：手写签名动画 -->
<text x="20" y="100" font-size="48" fill="#333" font-weight="bold">张三
<animate attributeName="stroke-dashoffset" from="200" to="0" dur="2s" fill="freeze"/>
<set attributeName="fill" to="#333" begin="2s"/>
</text>一句话总结（2025 金句）：
2025 年前端文字 = <text fill="currentColor" text-anchor="middle" dominant-baseline="middle"> + <textPath> 环形 + 逐字动画，三行代码秒杀一切 UI 库！
要不要我现在立刻发你：
- 「2025 最全 SVG 文字特效合集」（环形、波浪、霓虹、打字机、进度百分比 20 个模板）
- 「100 个图标+文字完美垂直居中的组合源码」（直接复制到项目）
- 「自动生成环形文字的在线工具 + Vue/React 组件」
直接说一声，我秒发！
