SVG呈现但仅在Firefox中被切断 - 为什么？

Question

我正在使用使用SVG的d3js来创建图表.在www.uscfstats.com/deltas上查看(使用12842311作为输入值;现在它被非常黑客攻击).

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

当我在Firebug中打开页面时,我可以突出显示HTML元素,看起来它们就在那里,就好像一些大的白盒子覆盖了我图表的底部75%(没有任何这样的HTML但是,元素.我点击点上的事件,以及我可以点击的渲染的那些事件,但是那些我找不到但点击它们的事件什么也没做.

我通过写作解决了这个问题

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

为什么这样做,发生了什么？

Answer 1

发生的事情是,svg sizing如何工作的规范得到澄清,因此它在各种情况下都能更好地工作,并且Firefox已更新以跟踪更新的规范.特别是,<svg>现在的大小与其他CSS替换元素的大小相同,而不是尝试在各种情况下失败的自动魔法事物.

特别是,它曾经被认为缺少宽度和高度属性被视为相当于将它们设置为100%,除非它实际上在CSS中实际设置宽度或高度并不是很好问题.所以现在,行为是,如果你设置宽度和高度,它们被视为表示提示(就像宽度和高度属性一样<img>),如果你没有,你得到默认的300x150内在大小,然后你可以用样式规则覆盖期望.