HTML5无内置路径动画，需用SVG+JS或CSS实现；animateMotion最语义化但仅限SVG元素且Safari 16.4+才完整支持；getPointAtLength+requestAnimationFrame兼容性最好、可驱动任意DOM元素；CSS关键帧仅适合简单近似路径。
HTML5 本身没有内置「路径动画」功能，所有路径运动效果都依赖 SVG + JavaScript 或 CSS 动画配合 getPointAtLength() / animateMotion 实现；纯 HTML 元素（如 div）无法直接沿 SVG 路径运动，必须借助 SVG 容器或转换坐标计算。
用 animateMotion 在 SVG 中驱动元素沿路径移动
这是最语义化、声明式最强的原生方案，但仅适用于 SVG 内部元素（如 <circle>、<g>），且需注意浏览器兼容性（Chrome/Firefox/Edge 支持良好，Safari 16.4+ 才完整支持 animateMotion 的 keyPoints 和 keyTimes）。
-
<path>必须有id，并在<animateMotion>中通过href引用 - 运动目标元素必须是 SVG 元素，不能是
<div>或其他 HTML 元素 - 路径需为闭合或开放均可，但建议使用
stroke可视化调试 - 若要控制速度曲线，需配合
keyPoints+keyTimes，且calcMode="spline"才生效
<svg width="400" height="200">
<path id="myPath" d="M20,100 Q100,50 200,100 T380,100" fill="none" stroke="#ccc"/>
<circle r="6" fill="#3498db">
<animateMotion dur="3s" repeatCount="indefinite">
<mpath href="#myPath"/>
</animateMotion>
</circle>
</svg>用 getPointAtLength() + requestAnimationFrame 手动计算位置
这是兼容性最好、控制最灵活的方式，适用于任意 DOM 元素（包括 div、img），核心是把 SVG 路径当「轨道」，用 JavaScript 采样点位并更新元素 transform: translate(x, y)。
- 先用
pathElement.getTotalLength()获取路径总长度 - 在动画循环中用
pathElement.getPointAtLength(offset)得到坐标（返回{x, y}对象） - 注意：
getPointAtLength()返回的是 SVG 坐标系下的值，若 SVG 有viewBox或缩放，需确保元素定位容器与 SVG 同一坐标系（推荐将运动元素放入<svg>内，或用getScreenCTM()转换） - 路径若含相对指令（如
q,t），getPointAtLength()仍可工作，但调试时建议先用绝对指令（Q,T）验证
const path = document.querySelector('#myPath');
const el = document.querySelector('.mover');
const length = path.getTotalLength();
<p>function moveAt(t) {
const point = path.getPointAtLength((t % 1) * length);
el.style.transform = <code>translate(${point.x}px, ${point.y}px)</code>;
}</p><p>function animate() {
const t = performance.now() / 2000; // 2s 一圈
moveAt(t);
requestAnimationFrame(animate);
}
animate();用 CSS @keyframes 模拟路径运动（仅限简单曲线）
不依赖 SVG，但本质是「近似」——把贝塞尔曲线拆成多段线性位移，适合图标入场、按钮微动等轻量场景。缺点是无法精确贴合复杂路径，且关键帧数量一多就难维护。
立即学习“前端免费学习笔记（深入）”；
- 用在线工具（如 Lottie 导出 JSON 或 SVG Path Animator）生成关键帧坐标
- CSS 中用
transform: translate()+cubic-bezier()控制缓动，但仅能模拟单段加速度，无法还原真实路径曲率 - 若路径含旋转/缩放需求，CSS 方案会迅速失控，此时必须切回 SVG + JS 方案
.mover {
animation: followPath 2s ease-in-out infinite;
}
<p>@keyframes followPath {
0% { transform: translate(20px, 100px); }
25% { transform: translate(100px, 50px); }
50% { transform: translate(200px, 100px); }
75% { transform: translate(300px, 150px); }
100% { transform: translate(380px, 100px); }
}常见翻车点：路径单位、坐标系、响应式断裂
90% 的「动不了」「偏移」「卡顿」问题都出在这三处，不是代码逻辑错，而是上下文没对齐。
-
<path d="M10,10 L100,100">中的数值默认是用户单位（user units），若 SVG 有viewBox="0 0 400 200"，又同时设了width="100%"，那实际像素位置会随容器缩放 —— 此时getPointAtLength()返回的仍是 viewBox 坐标，需手动映射到屏幕像素 - 把 HTML 元素（如
<div class="mover">）放在 SVG 外部时，其position: absolute的参考系是最近的定位祖先，极易因父容器transform或overflow截断导致错位 - 动画中频繁读写
offsetLeft/getBoundingClientRect()会触发强制同步布局（layout thrashing），应改用getPointAtLength()+transform单向驱动
真正难的从来不是“怎么让一个点动起来”，而是让路径、容器、坐标系、动画节奏四者严丝合缝；多数人卡在调试阶段，不是因为不会写 requestAnimationFrame，而是没意识到 getPointAtLength() 返回的坐标根本不在你预期的屏幕上。
