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></circle>、<g></g>），且需注意浏览器兼容性（Chrome/Firefox/Edge 支持良好，Safari 16.4+ 才完整支持 animateMotion 的 keyPoints 和 keyTimes）。
-
<path></path>必须有id，并在<animatemotion></animatemotion>+href控制缓动，但仅能模拟单段加速度，无法还原真实路径曲率 - 若路径含旋转/缩放需求，CSS 方案会迅速失控，此时必须切回 SVG + JS 方案
<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>常见翻车点：路径单位、坐标系、响应式断裂
90% 的「动不了」「偏移」「卡顿」问题都出在这三处，不是代码逻辑错，而是上下文没对齐。
<div> 中的数值默认是用户单位（user units），若 SVG 有 <code>stroke，又同时设了keyPoints，那实际像素位置会随容器缩放 —— 此时keyTimes返回的仍是 viewBox 坐标，需手动映射到屏幕像素- 把 HTML 元素（如
calcMode="spline"）放在 SVG 外部时，其getPointAtLength()的参考系是最近的定位祖先，极易因父容器requestAnimationFrame或div截断导致错位 - 动画中频繁读写
img/transform: translate(x, y)会触发强制同步布局（layout thrashing），应改用pathElement.getTotalLength()+pathElement.getPointAtLength(offset)单向驱动
真正难的从来不是“怎么让一个点动起来”，而是让路径、容器、坐标系、动画节奏四者严丝合缝；多数人卡在调试阶段，不是因为不会写 {x, y}，而是没意识到 getPointAtLength() 返回的坐标根本不在你预期的屏幕上。
立即学习“前端免费学习笔记（深入）”；
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();.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); }
}
