为什么动画D3示例适用于Chrome，但不适用于Firefox

Question

这可能是一个简单的修复，但我无法发现问题。 This动画D3示例在Chrome中运行良好，但Firefox（两者都是最新版本）均可正常运行。但是，此示例的static version适用于两种浏览器。我在本地服务器上设置了两个示例来检查元素。馅饼楔形切片的路径元素在firefox下绘制，但它们不会出现。因此，它似乎是一个CSS问题，但CSS看起来很好。这可能是D3下饼图布局的动画问题吗？

Answer 1

动画示例缺少<svg>元素的宽度和高度属性。根据替换元素的规则，这意味着它的默认大小为300 x 150。

Chrome正在努力纠正此问题，以便两种浏览器很快就能正常运行。

Answer 2

从SVG标记中删除overflow:hidden，然后它也可以在Firefox中运行。事实是firefox实际上正确地实现了SVG。它在chrome中运行良好，因为基于webkit的浏览器中的错误并不尊重overflow CSS属性。

https://bugs.webkit.org/show_bug.cgi?id=96163

您还需要更新SVG的维度及其内容，以获得更好的结果。