Svg.js: Failed to execute getPointAtLength on SVGGeometryElement

[liho98]

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

var canvas = SVG().addTo("#map").viewbox(0,0,800,1000)
  , rect = canvas.rect(100, 100)
  , path = canvas.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")
  , 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)

Explanation

I was trying the example and tutorial from the svg js website animating along the path but it throw exception. I am expecting it work with 3.0 svg js, since i failed to get the point from the path, im unable to move my object along the predefined path.

After replaced eased with pos and it works, i think the tutorial or example have been outdated and should be updated.

[Fuzzyma]

If the value is non-finite I guess eased * length gives you either NaN or Infinity. You could log that value to check. Where did you find the example?

[liho98]

Yes, i have logged the variable eased its undefined, and the example is found from the svg js 3.0 official website https://svgjs.com/docs/3.0/tutorials/

[Fuzzyma]

Jeah ok, the tutorials are not up to date. I didnt even know that they exist :D

[enlitendelfin]

So, in this example; how does one utilize easing in the during(pos) function? Since the easing variable doesn't seem to exist anymore?

Are you supposed to use: eased_pos = SVG.easing['<>'](pos); ?

[Fuzzyma]

Yes, the easing functions are accessible to anyone and the eased variable was just exactly that.

[enlitendelfin]

Why not update documentation(and examples) to reflect this change in functionality? Makes this superb library more accessible, and must demand very little effort!

Anyway, thx for your reply

[Fuzzyma]

well - I just spend 20 days of free time straight to write tests. Feel free to update the examples and create a PR with a new link.

[enlitendelfin]

I hear you, thank you for your efforts - a PR is coming.