SVG呈现，但在Firefox中被切断-为什么？
我使用d3js来创建图表，它使用SVG。在www.uscfstats.com/deltas查看它(使用12842311作为输入值；现在它非常复杂)。
在Chrome、Safari和Firefox10上，这像预期的那样呈现了一个完整的图表，占据了整个白框。然而，在更高版本的Firefox中，SVG的顶部200个左右的px呈现(具体地说是15个)，然后其余的就被切断了。
当我在Firebug中打开页面时，我可以突出显示HTML元素，它们似乎都在那里，就像一个大白框覆盖了我图表底部75%的部分(虽然没有这样的HTML元素)。我在点上有点击事件，呈现的点上我可以点击，但我找不到的点，但点击它们什么也不做。
我解决了这个问题，写道
var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");
为什么会这样?发生了什么？
回答 6
Stack Overflow用户
发布于 2012-10-11 12:32:15
实际情况是，svg大小调整的规范得到了澄清，因此它在各种情况下都能更好地工作，Firefox也进行了更新，以跟踪更新的规范。特别是，<svg>现在的大小与其他CSS替换的元素相同，而不是尝试在各种情况下失败的自动魔术。
特别值得一提的是，缺少宽度和高度属性被视为等同于将这两个属性都设置为100%，除了在CSS中实际设置宽度或高度并不是很好，而且还有其他一些问题。因此，现在的行为是，如果您设置了宽度和高度，这些内容将被视为表示提示(就像<img>的宽度和高度属性一样)，如果不这样做，您将获得默认的300x150固有大小，然后可以根据需要使用样式规则覆盖该大小。
Stack Overflow用户
发布于 2013-05-29 17:10:46
我也面临着同样的问题
.attr("width", window.innerWidth).attr("height",window.innerHeight)对我很管用。
Stack Overflow用户
发布于 2014-12-17 23:39:33
在火狐中，你需要定义你正在使用的单元：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');https://stackoverflow.com/questions/12830897
复制相似问题