当我使用SVG创建饼图时，浏览器呈现错误

Question

我想在WEB中用SVG创建饼图，但是在渲染方面遇到了问题。 例如：http://jsfiddle.net/shranet/dhvqo9z2/4/

我在Safari 8.0.8（Mac）和Chrome 43（Windows）上进行了测试。

结果： http://s8.postimg.org/gme22ea6t/render_problem.png

当我将路径的属性值设置为“M 50 50 L 50 0 A 50,50 0 0，1 100 50 z”或“M 50 50 L 50 0 A 50,50 0 1，1 0 50 z“，一切都很完美。

为什么？

Answer 1

圆弧段的最后一点（9.14 21.32）不在圆周上。

如果我们计算它与圆心的距离：

sqrt( (50 - 9.14)^2 + (50-21.32)^2 ) = 49.92

距离半径50远远足以让一切都消失。

另一个问题是您正在尝试创建超过270度的弧。当您尝试这样做时，会出现数值精度问题。对于像你的图形那样你需要更高精度的东西，我建议你保持弧度最大为90度。

如果我们更新您的示例以修复这两件事，您会得到更好的结果：

<path d="M 50 50 L 50 0 
         A 50 50 0 0 1 100 50
         A 50 50 0 0 1 50 100
         A 50 50 0 0 1 0 50
         A 50 50 0 0 1 9.14 21.182 z" stroke="none" fill="#ffb300" />

Demo fiddle here