本文详解如何在 SVG.js 3.0.5 中正确实现矩形沿任意 SVG 路径的动画运动，重点解决 getPointAtLength 非有限值错误，并对比 v2 与 v3 在 animate() 签名和回调参数上的关键差异。
本文详解如何在 svg.js 3.0.5 中正确实现矩形沿任意 svg 路径的动画运动，重点解决 `getpointatlength` 非有限值错误，并对比 v2 与 v3 在 `animate()` 签名和回调参数上的关键差异。
在 SVG.js 从 v2 升级到 v3 的过程中，动画 API 发生了重要变更——不仅方法签名调整，回调参数也大幅精简。若直接沿用 v2 的写法（如 rect.animate(8000, '') 或 during(function(pos, morph, eased) {...})），将触发 Uncaught TypeError: Failed to execute 'getPointAtLength'... The provided float value is non-finite 错误。根本原因在于：v3 中 eased 参数已不再是归一化进度值（0–1），而是原始时间比例；且 pointAt() 要求传入的长度值必须严格介于 0 与 path.length() 之间。
✅ 正确写法（SVG.js v3.0.5）
// 创建画布与图形
const draw = SVG().addTo('#drawing').size(800, 800);
const rect = draw.rect(100, 100).attr({ fill: '#f06' });
const path = draw.path('m 357.6..., ...'); // 你的路径数据
const totalLength = path.length(); // 必须先计算路径总长
// 绘制路径（仅作参考，不填充）
path.fill('none').stroke({ width: 1, color: '#ccc' });
// ✅ 关键修正：v3 动画链式调用 + 单参数回调
rect.animate(5000) // duration（毫秒）
.ease('') // 使用 ease() 方法单独设置缓动函数
.during(eased => { // 注意：仅接收一个参数 —— 归一化进度 (0.0 ~ 1.0)
const point = path.pointAt(eased * totalLength); // 安全计算路径上点
rect.center(point.x, point.y); // 居中定位到该点
});
⚠️ 常见错误与规避要点
❌ 错误签名：animate(8000, '') → v3 已废弃此形式，第二参数是 delay（毫秒），非 ease。
❌ 多参数回调：v2 的 function(pos, morph, eased) 在 v3 中无效；v3 during() 回调只传入一个归一化进度值 eased（范围 0.0 到 1.0）。
-
❌ 未校验路径长度：若路径为空或解析失败，path.length() 可能返回 NaN 或 0，导致 pointAt(NaN) 报错。建议添加防护：
if (isNaN(totalLength) || totalLength
-
✅ 推荐增强：循环与方向控制
若需无限循环+自动反向（类似 v2 的 .loop(true, true)），可手动封装：function animateOnPath(el, path, duration) { const len = path.length(); let direction = 1; let progress = 0; const anim = el.animate(duration).ease(''); anim.during(eased => { const t = direction > 0 ? eased : 1 - eased; const p = path.pointAt(t * len); el.center(p.x, p.y); }); anim.loop(() => { direction *= -1; progress = direction > 0 ? 0 : 1; }); } animateOnPath(rect, path, 5000);
? 总结
SVG.js v3 的动画设计更强调链式调用与语义清晰性：ease()、delay()、loop() 均作为独立方法链式调用；during() 回调简化为单参数 eased（即 t ∈ [0,1]），极大降低了使用门槛。只要牢记两点——animate() 不再接受 ease 作为第二参数，且during 回调只接收一个归一化进度值——即可安全实现路径跟随动画，避免 getPointAtLength 相关错误。
