用 offset-path + offset-distance 实现跨浏览器路径运动是目前唯一稳定方案，需用 path() 语法、块级元素、绝对坐标，配合 @keyframes 和 animation-fill-mode: forwards；描边动画推荐 stroke-dasharray + stroke-dashoffset，须 js 动态获取长度并设 fill="none" 和 stroke。
别用 animateMotion，它在 Firefox 已移除、Safari 支持不全，Chrome 也仅维持基础兼容——写完发现动画不跑，不是你代码错，是浏览器直接不认。
用 offset-path + offset-distance 实现跨浏览器路径运动
这是目前唯一能稳定运行在 Chrome、Edge、Firefox（≥111）、Safari（≥15.4）的原生方案，且无需 JS 即可启动。
关键限制必须记牢：
-
offset-path只接受path()函数语法，不能引用 SVG 中的<path id="p1"></path>元素 - 目标元素必须是块级或行内块（
display: block或inline-block），原生 SVG 形状如<circle></circle>无法直接受控 - 路径指令建议全用绝对坐标（
M,L,Q,C），避免 Firefox 对t/s等相对指令解析失败 -
offset-distance动画需配合@keyframes，且animation-fill-mode: forwards才能停在终点
最小可行示例：
<div class="mover">
<svg viewbox="0 0 20 20"><circle r="4" fill="#e74c3c"></circle></svg>
</div>
<style>
.mover {
offset-path: path('M10,80 Q95,10 180,80');
animation: move 3s ease-in-out forwards;
}
@keyframes move {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
</style>
用 stroke-dasharray + stroke-dashoffset 实现“绘制”效果
这是最成熟、兼容性最好的描边动画方式，IE11 都能跑，但必须靠 JS 获取真实长度，硬编码会崩。
常见翻车点：
-
getTotalLength()调用时机错误：DOM 渲染未完成时返回0，必须等DOMContentLoaded或svg.onload - 忘了设
fill="none"，填充色盖住描边，动画看不见 - 路径有
stroke-width但没设stroke，描边根本不存在，dash 效果无效 - 响应式缩放后路径长度变化，但 CSS 里写的死值没更新，动画变快/卡顿/截断
推荐做法：用 CSS 自定义属性注入长度，JS 只负责计算和设置
const pathEl = document.getElementById('myPath');
const len = pathEl.getTotalLength();
pathEl.style.setProperty('--path-len', len);
// CSS 中用 stroke-dasharray: var(--path-len);
复杂路径动画必须避开的三个坑
实际项目里最容易卡住的地方，往往不是写法，而是上下文干扰：
- 多个动画叠加时，
transform和offset-distance同时作用会冲突——offset-path本身已隐含位移，再加translate会导致偏移错乱 - SVG
viewBox缩放后，offset-path的path()坐标单位仍是逻辑像素，但视觉尺寸变了，路径可能被裁切或溢出容器 - 用 Web Worker 异步生成路径字符串时，主线程拿到
d属性后直接setAttribute，但若该路径已被用于offset-path，新值不会自动生效，得手动重置动画或触发重排
真正难的从来不是让动画动起来，而是让它在缩放、重绘、交互、多端适配的缝隙里，始终不跳、不卡、不错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
