SVG.js v3 路径动画实战：让矩形沿 SVG 路径平滑移动-js教程-PHP中文网

SVG.js v3 路径动画实战：让矩形沿 SVG 路径平滑移动

本文详解如何在 SVG.js 3.x 中正确实现矩形沿自定义路径的动画运动，重点解决 pointAt() 报错、参数签名变更及回调函数适配等常见兼容性问题。

本文详解如何在 svg.js 3.x 中正确实现矩形沿自定义路径的动画运动，重点解决 `pointat()` 报错、参数签名变更及回调函数适配等常见兼容性问题。

在 SVG.js 从 v2 升级到 v3 的过程中，动画 API 发生了显著变化——不仅方法签名重构，回调参数也大幅精简。许多基于 v2 编写的路径动画代码（如让图形沿移动）在 v3 中会直接报错，典型错误如：

Uncaught TypeError: Failed to execute 'getPointAtLength' on 'SVGGeometryElement': The provided float value is non-finite.

该错误本质是 path.pointAt() 接收了非有限数值（如 NaN 或 Infinity），通常源于 eased 参数未被正确计算或传入，而根源正是 v3 中 animate() 和 during() 的调用方式变更。

php版微信js-sdk支付接口类

下载

✅ 正确写法：v3 兼容的路径动画实现

以下是经过验证的 SVG.js v3.0.5+ 标准写法（已移除所有兼容性陷阱）：



  <title>SVG.js v3 路径动画</title><style>
    html, body, #drawing { width: 100%; height: 100%; margin: 0; }
  </style><script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.5/dist/svg.min.js"></script><div id="drawing"></div>
  <script>
    SVG.on(document, 'DOMContentLoaded', () => {
      const draw = SVG().addTo('#drawing').size(800, 600);
      const rect = draw.rect(80, 40).fill('#f06');
      const path = draw.path(
        'M100,200 C200,100 400,100 500,200 C600,300 600,500 500,600'
      ).stroke({ width: 1, color: '#ccc' }).fill('none');

      const pathLength = path.length(); // ✅ 必须先获取有效长度
      console.log('Path length:', pathLength); // 建议调试时打印，确认 > 0

      // ✅ v3 正确链式调用：animate() → ease() → during()
      rect.animate(5000)
          .ease('<>') // 缓动类型单独调用
          .during((eased) => {
            // eased ∈ [0, 1] —— v3 仅传递单一归一化进度值
            const point = path.pointAt(eased * pathLength); // ✅ 安全计算
            rect.center(point.x, point.y);
          })
          .loop(true); // 自动循环（可选）
    });
  </script>

⚠️ 关键变更与注意事项

animate() 参数顺序变更：
v2：animate(duration, ease, delay)
v3：animate(duration, delay, when) → ease() 必须作为独立方法链式调用，不再作为 animate() 的第二参数。
during() 回调参数简化：
v2 传递 (pos, morph, eased, situation) 四个参数；
v3 仅传递一个参数 eased（归一化的进度值，范围 [0, 1]），其余参数已废弃。强行解构旧参数会导致 undefined 进而引发 NaN * length 错误。
path.length() 必须成功执行：
确保数据语法合法（无未闭合指令、无效坐标）。若 path.length() 返回 0 或 NaN，pointAt() 必然失败。建议开发阶段添加 console.log(path.length()) 验证。
避免 .loop(true, true) 误用：
v3 中 loop() 仅接受单个布尔值（是否启用循环），第二个参数已被移除。旧写法会静默忽略或引发意外行为。