CODEWITHSUNDEEP
javascriptsvg.js
starrezzy
starrezzy

Reputation: 3

SVG.js version 3.0.5 - Animate a rectangle to move along a specified path

I have come across a working example of using SVG.js version 2.5.0 for moving a rectangle along a path in jsfiddle. I am trying to duplicate the same behavior but in SVG.js version 3.0.5 but keep getting back an error.

The jsfiddle resides at : jsfiddle and my attempt is at : jsfiddle

When the code is run in chrome i get the following error in the console :

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)

The complete html of the page that i am running is :

<html>
    <head>
        <title>SVG.js</title>
        <style>
            html, body, #drawing{
                width:100%;
                height:100%;
            }      
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/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>

I followed the advice from Armali and made the corrections as per below that worked.

<!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/[email protected]/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>

Upvotes: 0

Views: 69

Answers (2)

starrezzy
starrezzy

Reputation: 3

I followed the advice and it works :

<!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/[email protected]/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>

Upvotes: 0

Armali
Armali

Reputation: 19375

First, while SVG.js v2 says

The animate() method will take three arguments. The first is duration, the second ease and the third delay…

SVG.js v3 says

The animate() method will take three arguments. The first is duration, the second delay and the third when…

So we have to change animate(8000, '<>') to animate(8000).ease('<>').

Second, while SVG.js v2 has an example with …during(function(pos, morph, eased, situation) {…, SVG.js v3 has no such example, and surprisingly passes only one parameter. It works if we change to just …during(function(eased) {….

Upvotes: 0

Related Questions