我正在使用版本3.x中的D3.js .
在this教程之后，我试图沿着路径移动一个元素，在这种情况下是一个矩形，并根据它在路径上的位置旋转元素 .
这适用于任何路径，作为其中的一部分 does not have an arc . 像这样的东西：
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
My assumption:
至于创建弧，我们只给出一些值，比如起点和角度，绘制弧所需的其余点是由svg以某种方式计算的 . 根据我的尝试，我看到一些计算点实际上并不是我所期望的 .
链接示例中使用的函数计算两个点p1和p2，并通过在p1和p2上使用Math.atan2计算旋转角度 . 我知道这些点非常接近，但为了简化我的解释，我在图像中有一些距离 . 在这张图片中，我希望 p1 的x和y值小于 p2 . 在p1和p2之间的区域中有很多点，因此该函数计算每个对中所需的角度 . 对于它们中的大多数，角度是正确的，但不是所有这些角度都可以在下面的console.log（）输出中看到：
请注意，对于大多数点，角度约为67度，在路径的相应区域应该是这样的 . 但随后有一个33度的角度，这当然会导致这种翻转/跳跃效果 .
对于“预期角度”，过渡看起来很好，如下所示：
对于“非预期角度”，过渡看起来很糟糕，如下所示：
如果在整个过渡期间发生这种情况，则会产生翻转/跳跃效果 .
My question:
为什么会这样？电弧看起来很好，所有的点似乎都是基于在屏幕上直观地看到它们 . 有没有办法避免这种情况，同时仍然能够使用内部弧线的路径？
非常感谢您的帮助 .
编辑：添加了一个jsfiddle，向您展示此处和评论中讨论的问题：Element rotation with point-along-path interpolation - not possible on path with arc?
1 回答
当前Chrome中存在一个错误（写入时为57和58），当操作弧路径命令时会影响
getPointAtLength()的返回值 .https://bugs.chromium.org/p/chromium/issues/detail?id=719516
目前，除了自己平滑输出值之外，似乎没有简单的解决方法 . 或者避免路径中的弧命令 .