Is it impossible to rotate an element with path interpolation on an arc path?

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

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

This works great for any path that doesn't have an arc as part of it. Something like that:

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

The angle is calculated "correctly" on a path like this, and the element moves along that path in a smooth manner.

But once the path contains an arc, the angle gets some weird values ​​at some points on the arc, and so the rectangle flips / bounces around that corner when translated along the path. A path with an arc looks like this:

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

My suggestion:

As for creating the arc, we only give some values ​​like the start point and the angle, and the rest of the points needed to draw the arc are somehow computed by svg. Based on my attempts, I saw that some of the calculated 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 rotation angle using Math.atan2 on p1 and p2. I know the points are very close to each other, 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 many points in this area between p1 and p2, so the function calculates the required angle for each of these pairs. The angle is correct for most of them, but not all of them, as you can see from the following console.log () output:

Note that for most of the points the angle is about 67 degrees, which should be the same as the corresponding area of ​​the path. But then one corner is randomly found which is 33 degrees, which of course causes this drop / jump effect.

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

For the "expected corners" the transition looks bad and something like this:

If this happens multiple times throughout the transient, it will cause a flipping / jumping effect.

My question is:

Why is this happening? The arc looks great, and all the dots seem to be in place when you see them on the screen. Is there a way to avoid this while still being able to use paths with an arc inside?

Thanks a lot for any help.

Edit: Added a jsfiddle to show you the issues discussed here and in the comments: Rotating an element with path-point interpolation - not possible on a path with an arc?