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.

[kelvinsekx]

Up until now @enlitendelfin you haven't made a PR? Or it hasn't been merged? Unfortunately, I am yet having this same error. Sincerely, I don't know my way around it or how much might have changed. All of this with no single documentation have been made.

It makes it terrible to even try to update the doc that is over 4 years old.

[kelvinsekx]

If you face this same problem here is a working version https://codesandbox.io/s/old-currying-ps5k7k?file=/src/index.js

[kelvinsekx]

I will start updating the docs in coming weeks. This library is cool, but the documentation is limiting.