javascript - SVG 可以渲染，但仅在 Firefox 中被切断 - 为什么？

Question

我正在使用 d3js(它使用 SVG)来创建图表。请在 www.uscfstats.com/deltas 上查看(使用 12842311 作为输入值；现在它已经被黑客攻击得很厉害了)。

在 Chrome、Safari 和 Firefox 10 上，这会按预期呈现完整图表，占据整个白框。然而，在更高版本的 Firefox 上(具体来说，15)，SVG 渲染的前 200 像素左右，但其余部分会被切断。

当我在 Firebug 中打开页面时，我可以突出显示 HTML 元素，看起来它们都在那里，就好像某个大白框覆盖了我的图表底部 75%(没有但任何此类 HTML 元素)。我在这些点上有点击事件，并且我可以点击那些渲染的事件，但是我可以找到那些不是的事件，但点击它们不会执行任何操作。

我通过编写解决了问题

var svg = d3.select("#scatterplot").append("svg").attr("宽度", "100%").attr("高度", "100%");

为什么会起作用以及发生了什么？

Answer 1

所发生的事情是，关于 svg 大小调整应该如何工作的规范得到了澄清，因此它在各种情况下都能更好地工作，并且 Firefox 也进行了更新以跟踪更新的规范。特别是<svg>现在大小与其他 CSS 替换元素相同，而不是尝试在各种情况下都会失败的自动魔法。

特别是，过去缺乏宽度和高度属性被视为相当于将它们都设置为 100%，只不过它与在 CSS 中实际设置宽度或高度并没有真正发挥作用，并且还有一些其他问题。所以现在，行为是，如果您设置宽度和高度，它们将被视为表示提示(就像 <img> 的宽度和高度属性)，如果您不设置，您将获得默认的 300x150 内在尺寸，然后您可以使用它覆盖根据需要设置样式规则。