SVG文字路径动画通过绑定路径并动态调整startOffset实现文字沿路径流动，核心原理是字符基线与路径几何对齐，支持CSS或SMIL动画控制起始位置，广泛应用于品牌展示、数据可视化等场景。
直接用 @keyframes 动画 SVG
浏览器原生不支持对 d 属性做 CSS 关键帧插值——你写 @keyframes { from { d: "M0,0 L10,10"; } to { d: "M0,0 Q5,5 10,0"; } }，CSS 引擎直接忽略，路径不会动。这不是写法问题，是规范限制（SVG 2 中仍未纳入）。所以所有“纯 CSS + SVG path 动画”的教程，实际都绕开了 d 的直接绑定。
真正可行的方案：用 transform + clip-path 模拟液体填充感
核心思路是不动 clip-path）从下往上“推”出液体上升效果，再叠加波纹位移和模糊来强化质感。适用于文字填充、进度条、图标加载等场景。
-
clip-path必须用inset()或polygon()，不能用url(#clip)（后者无法动画） - 推荐用
inset(calc(100% - var(--fill-height)), 0, 0, 0)，配合 CSS 变量驱动，JS 可实时修改--fill-height - 加一层
::after伪元素做波纹：用transform: translateX(5px) translateY(-2px)配合animation-timing-function: cubic-bezier(.34,.18,.25,.99)模拟不规则流动 - 边缘模糊需用
filter: blur(1.2px)，但只对 Chrome/Edge 有效；Safari 要降级为backdrop-filter或直接省略
GSAP 替代方案中 attr: { d: ... } 的性能雷区
如果必须动态变形路径（比如熔融文字、粘连融合），GSAP 是目前最稳的选择，但极易卡顿：
-
GSAP.to(path, { attr: { d: "M0,0 C..." } })每次传新字符串，浏览器要全量解析整个 path 数据，100+ 控制点时帧率暴跌 - 正确做法是预生成关键帧路径数组，用
gsap.utils.mapRange()插值坐标点，再手拼d字符串；或用customBounce插件接管更新逻辑 - 必须加
force3D: true，否则 Chrome 120+ 版本中 SVG 元素动画掉帧明显（尤其 macOS 上） - 初始化别用
gsap.set(path, { attr: { d: ... } })—— 它不触发重绘，得用gsap.fromTo(path, { opacity: 0.001 }, { opacity: 1, attr: { d: ... } })
质感增强的关键细节常被忽略
液体感不是靠“动起来”，而是靠三处微调：
- 波纹频率要错开：主填充层用 3.2s 周期，上层高光用 2.7s，避免机械同步
- 颜色不能单色：用
background: linear-gradient(145deg, #4a90e2, #6cb2eb)模拟水面折射，渐变角度随--fill-height微调 - 移动端必须降级：iOS Safari 不支持
clip-path动画，fallback 方案是改用mask-image: linear-gradient(...)+mask-size动画（兼容 iOS 15.4+）
真正的难点不在“怎么动”，而在“怎么让动得不像程序算出来的”。所有平滑曲线、随机偏移、多层 timing-function 差异，都是为了掩盖数学插值的痕迹——这点，连最新版 GSAP 也得靠人工调参。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
