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内在大小，然后你可以根据需要覆盖样式规则。

Answer 2

我也面临同样的问题

.attr("width", window.innerWidth).attr("height",window.innerHeight)

为我工作。

Answer 3

在Firefox中，您需要定义您正在使用的单位：px，%等

因此以下内容对我不起作用：

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

但以下确实有效：

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');

Answer 4

奇怪的是，“100％”适用于宽度，但也适用于高度。我结束了设置为innerWidth / innerHeight。 CentOS6上的Firefox 31.0。 FYI

Answer 5

同时仔细检查并确保您不使用 innerWidth 或 outerHeight 等变量名称。这就是我的问题。 IE9和Chrome渲染得很好，但Firefox（33.0）变得疯狂 - 也许是一个bug。

Answer 6

将svg插入flex容器并添加属性flex：auto; svg。它对我有用

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

6 个答案: