為什么動畫D3示例在Chrome而不是Firefox中有效

Question

這可能是一個簡單的修復程序，但我無法發現問題。 這個動畫D3示例在Chrome中可以正常運行，但在Firefox（兩個最新版本）中均無法正常運行。 但是，此示例的靜態版本可在兩種瀏覽器中使用。 我已經在本地服務器上設置了兩個示例來檢查元素。 楔形切片的路徑元素是在Firefox下繪制的，但它們根本沒有出現。 因此，這似乎是一個CSS問題，但CSS對我來說還不錯。 這可能與D3下的餅圖布局的動畫有關嗎？

Answer 1

動畫示例缺少<svg>元素的width和height屬性。 根據有關替換元素的規則，這意味着其默認大小為300 x 150。

Chrome正在努力更正此問題，以便兩個瀏覽器都能盡快運行相同。

Answer 2

刪除SVG標簽中overflow:hidden ，然后它也可以在Firefox中使用。 事實是，Firefox實際上是在正確實現SVG。 由於基於webkit的瀏覽器中的一個漏洞不考慮overflow CSS屬性，因此它在chrome中效果很好。

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

您還需要更新SVG的尺寸及其內容，以獲得更好的結果。