SVG弧完成它的弧线时会滑落

Question

http://codepen.io/andrewplummer/pen/pyjjbJ

我试图为图形创建一个简单的弧。我已经读过＆＃34; A a＆＃34; SVG中的弧，我相信我理解具体细节，但当弧接近其原点时，它开始向右滑动，我无法弄清楚原因。

主要问题似乎在这里：<path d="M75 5 A70 70 0 1 1 71 6" stroke="#3f51b5"></path>。当闭合点（71 76）接近原点（75 5）时，弧开始向右移动。笔显示更多详细信息...所有浏览器都显示此行为，因此它似乎不是一个错误。

Answer 1

如果您需要精度，请不要尝试使用一个路径弧命令绘制完整的360度弧。因为在描述弧时没有指定中心点，所以起点，终点和半径组合之间的微小数学误差会导致弧线移动相当惊人的数量。

我建议保持弧度最大为180度。对于大半径，你可能想要更低，并将其限制在90度。

Answer 2

事实证明，这是对Math.ceil的调用造成了这个问题。看起来，即使最终x / y位置的微小变化（svg A命令的最后2个参数）也会对结果弧产生很大影响。当绘制较大的弧线时，这些较小的差异会产生更夸张的效果，因此@Paul LeBeau的答案有些正确。然而，简单地没有舍入修复问题并完美渲染所以看起来一个弧实际上会做这个技巧，只是不要圆（圆形像素值对于习惯于糟糕浏览器的旧开发者来说是一种习惯的力量）。 / p>

Answer 3

arc命令有两个标志，附加的图像应该解释它。

你想画一个完整的圆圈吗？