沿着路径点插值的元素旋转 - 在带弧的路径上不可能？

Question

我正在使用版本3.x中的D3.js。

在this教程之后，我试图沿着路径移动一个元素，在本例中是一个矩形，并根据它在路径上的位置旋转元素。

这适用于任何路径，没有圆弧作为其中的一部分。像这样：

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

在这样的路径上计算角度“正确”，并且元素以平滑的方式沿着这条路径平移。

但是一旦路径包含弧，角度在弧的某些点处会得到一些奇怪的值，因此矩形在沿着路径平移时基于该角度翻转/跳跃。带弧的路径如下所示：

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

我的假设：

至于创建弧，我们只提供一些值，如起点和角度，绘制弧所需的其余点由svg以某种方式计算。 基于我的尝试，我看到一些计算点实际上并不是我所期望的那样。

链接示例中使用的函数计算两个点p1和p2，并使用p1和p2上的Math.atan2计算旋转角度。 我知道这些点非常接近，但为了简化我的解释，我在图像中有一些距离。 在此图片中，我希望 p1 的x和y值小于 p2 。 在p1和p2之间的区域中有很多点，因此该函数计算每个对中所需的角度。对于它们中的大多数，角度是正确的，但不是所有这些角度都可以在下面的console.log（）输出中看到：

请注意，对于大多数点，角度约为67度，在路径的相应区域应该是这样的。但随后有一个33度的角度，这当然会导致这种翻转/跳跃效果。

对于“预期角度”，过渡看起来很好，如下所示：

对于“非预期角度”，转换看起来很糟糕，如下所示：

如果在整个过渡期间发生这种情况，则会产生翻转/跳跃效果。

我的问题：

为什么会这样？电弧看起来很好，所有的点似乎都是基于在屏幕上直观地看到它们。 有没有办法避免这种情况，同时仍然可以使用内部带弧的路径？

非常感谢您的帮助。

编辑：添加了一个jsfiddle，向您展示此处和评论中讨论的问题：Element rotation with point-along-path interpolation - not possible on path with arc?

Answer 1

当前Chrome中存在一个错误（撰写时为57和58），在操作弧路径命令时会影响getPointAtLength()的返回值。

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

目前除了自己平滑输出值之外似乎没有简单的解决方法。或者避免路径中的弧命令。