SVG.js 3.0.5矩形沿路径动画报错及修复方案

我在SVG.js 2.5.0版本中实现了矩形沿路径移动的效果，但在3.0.5版本中复现相同逻辑时持续报错。

报错信息 #

Chrome控制台报错如下：

sugar.js:125 Uncaught TypeError: Failed to execute 'getPointAtLength' on 'SVGGeometryElement': The provided float value is non-finite.
    at Path.pointAt (sugar.js:125:32)
    at o.<anonymous> (svgjsVersion3.html:24:34)
    at o.value (Runner.js:430:38)
    at o.value (Runner.js:305:28)
    at n.value (Timeline.js:274:29)
    at _draw (Animator.js:86:17)

原测试代码 #

<html>
    <head>
        <title>SVG.js</title>
        <style>
            html, body, #drawing{
                width:100%;
                height:100%;
            }      
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    </head>
    <body onload="onload();">
        <div id="drawing"></div>
        <script>
            function onload() {
                var draw = SVG().addTo('#drawing').size(800, 800);
                var rect = draw.rect(100, 100).attr({fill: '#f06'});
                var path = draw.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113");
                var length = path.length();
                path.fill('none').stroke({width: 1, color: '#ccc'});
                
                rect.animate(8000, '<>').during(function(pos, morph, eased){
                    var p = path.pointAt(eased * length)
                    rect.center(p.x, p.y)
                }).loop(true, true)            
            }
        </script>
    </body>
</html>

修复后可运行代码 #

按照建议修正后，代码可正常运行：

<!DOCTYPE html>
<html>
    <head>
        <title>SVG.js</title>
        <style>
            html, body, #drawing{
                width:100%;
                height:100%;
            }      
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    </head>
    <body onload="onload();">
        <div id="drawing"></div>
        <script>
            function onload() {
                var draw = SVG().addTo('#drawing').size(800, 800);
                var rect = draw.rect(100, 100).attr({fill: '#f06'});
                var path = draw.path("m 357.64532,453.84097 c 17.62007,8.02216 -2.12058,27.70935 -13.33334,29.28571 -30.3859,4.27185 -48.34602,-29.97426 -45.23807,-55.9524 5.5594,-46.46879 56.1311,-70.59787 98.57145,-61.19043 62.28294,13.8058 93.32728,82.57702 77.1428,141.19051 C 453.21679,585.29693 365.67122,623.42358 290.97859,600.26951 196.98554,571.13248 151.71003,464.56996 181.93108,373.84089 218.53281,263.95583 344.23687,211.49702 450.97875,248.84102 576.77037,292.84963 636.43303,437.76771 591.93099,560.50775 540.55162,702.21597 376.3736,769.09583 237.6452,717.41234 80.01319,658.68628 5.9069261,475.21736 64.788247,320.50751 130.84419,146.94643 333.62587,65.607117 504.31214,131.69819 693.80625,205.0718 782.38357,427.18225 709.07382,613.84113");
                var length = path.length();
                console.log(length);
                path.fill('none').stroke({width: 1, color: '#ccc'});

                rect.animate(5000,1000).ease('<>').during(function(eased){
                    var p = path.pointAt(eased * length);
                    rect.center(p.x, p.y);
                });
            }
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者starrezzy