Element rotation with point-along-path interpolation - not possible on path with arc?

Question

I am working with D3.js in version 3.x.

Following this tutorial, I am trying to move an element, in this case a rectangle, along a path and rotate the element based on its position on the path.

This works perfectly fine for any path, that does not have an arc as part of it. Something like this:

M56.200012207,96.1999969482c-51,295,-52,294,280,184c-286,-273,-243,-261,-35,-204

The angle is calculated "correct" on a path like this, and the element translates along this path in a smooth way.

But as soon as the path contains an arc, the angle gets some strange values at some points of the arc and therefore the rectangle flips / jumps around based on this angle while translating along the path. A path with an arc looks like this for example:

M56.20001220703125,66.19999694824219a174.796117,174.796117,0,1,0,275.99999999996874,-2.000000000042192

My assumption:

As for creating an arc, we only give some values, like startpoint and angle, and the rest of the points needed to draw the arc are computed in some way by svg. Based on my tries, i saw that some of the computed points are not actually where i would expect them to be.

The function used in the linked example calculates two points, p1 and p2 and calculates the angle for the rotation by using Math.atan2 on p1 and p2. I know the points are very close together, but to simplify my explanation, i have some distance between them in the image. In this image, i would expect p1 to have smaller values for x and y than p2. There are a lot of points in that area between p1 and p2, so the function calculates the required angle for each of these pairs. For most of them, the angle is correct, but not for all of them as can be seen in the following console.log() output:

Notice that for most points, the angle is around 67 degree, which is supposed to be like this on the respective area of the path. But then there randomly is one angle that is 33 degree, which of course causes this flipping / jumping effect.

For "expected angles" the transition looks good and something like this:

For "not expected angles", the transition looks bad and something like this:

If this happens a few times throughout the transition, this produces the flipping / jumping effect.

My question:

Why is this happening? The arc looks fine and all the points seem to be in place based on visually looking at them on screen. Is there any way to avoid this while still being able to use paths with an arc inside?

Thank you very much for any help.

Edit: Added a jsfiddle to show you the problems discussed here and in the comments: Element rotation with point-along-path interpolation - not possible on path with arc?

Answer 1

There is a bug in current Chrome (57 and 58 as of writing) that affects the return values for getPointAtLength() when operating on arc path commands.

https://bugs.chromium.org/p/chromium/issues/detail?id=719516

For now there seems to be no easy fix other than smoothing the output values yourself. Or avoiding arc commands in your paths.