javascript SVG 呈现但仅在 Firefox 中被切断 - 为什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12830897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG renders but gets cut off in Firefox only - why?
提问by Andrew Latham
I am using d3js, which uses SVG, to create a chart. View it at www.uscfstats.com/deltas (use 12842311 as the input value; right now it's VERY hacked together).
我正在使用使用 SVG 的 d3js 创建图表。在 www.uscfstats.com/deltas 上查看它（使用 12842311 作为输入值；现在它非常被黑客攻击）。
On Chrome, Safari, and Firefox 10 this rendered a full chart as expected, which took up the whole white box. On later versions of Firefox, however (specifically, 15) the top 200 or so px of the SVG render, but then the rest gets cut off.
在 Chrome、Safari 和 Firefox 10 上，这按预期呈现了一个完整的图表，占据了整个白框。然而，在更高版本的 Firefox 上（特别是 15）SVG 渲染的前 200 像素左右，但其余部分被切断。
When I open up the page in Firebug, I can highlight over HTML elements and it seems like they're all there, it's as though some big white box is covering up the bottom 75% of my chart (there isn't any such HTML element, though). I have click events on the dots, and the ones that are rendered I can click on, but the ones that aren't I can find but clicking on them does nothing.
当我在 Firebug 中打开页面时，我可以突出显示 HTML 元素，它们似乎都在那里，就好像一些大白框覆盖了我图表的底部 75%（没有任何这样的 HTML元素，虽然）。我在点上有点击事件，渲染的那些我可以点击，但那些我找不到但点击它们什么都不做。
I fixed the problem by writing
我通过写作解决了这个问题
var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");
var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");
Why does this work and what happened?
为什么会这样？发生了什么？
采纳答案by Boris Zbarsky
What happened is that the spec for how svg sizing should work got clarified so it works better in various cases, and Firefox was updated to track the updated spec. In particular, <svg>now sizes the same way as other CSS replaced elements, instead of trying for auto-magic things that fail in all sorts of situations.
发生的事情是 svg sizing 应该如何工作的规范得到了澄清，因此它在各种情况下都能更好地工作，并且 Firefox 已更新以跟踪更新的规范。特别是，<svg>现在大小与其他 CSS 替换元素的大小相同，而不是尝试在各种情况下失败的自动魔法。
And in particular, it used to be that lack of width and height attributes was treated as sort of equivalent to setting them both to 100%, except it didn't really play nice with actually setting a width or height in CSS and had some other problems. So now, the behavior is that if you set width and height those are treated like presentational hints (just like width and height attributes for <img>) and if you don't you get the default 300x150 intrinsic sizing which you can then override with style rules as desired.
特别是，过去缺少 width 和 height 属性被视为等同于将它们都设置为 100%，除了在 CSS 中实际设置宽度或高度并没有真正发挥作用之外，还有其他一些问题。所以现在，行为是，如果您设置宽度和高度，它们将被视为表示性提示（就像 的宽度和高度属性一样<img>），如果您不设置，您将获得默认的 300x150 内在尺寸，然后您可以使用样式规则覆盖它想要的。
回答by Amit
I was also facing same issue
我也面临同样的问题
.attr("width", window.innerWidth).attr("height",window.innerHeight)
worked for me.
对我来说有效。
回答by RobotEyes
In firefox you need to define what units you're using: px, %etc
在Firefox中，你需要定义你所使用的单位：px，%等
thus the following didn't work for me:
因此以下对我不起作用：
var width = 800,
height = 600;
var el = d3.select('#d3_element')
.style('width', width)
.style('height', height);
but the following did work:
但以下确实有效：
var el = d3.select('#d3_element')
.style('width', width + 'px')
.style('height', height + 'px');
回答by Ash Catchem
Also double check and make sure that you're not using variable names like innerWidthor outerHeight. That was the problem in my case. IE9 and Chrome renders it fine but Firefox (33.0) goes crazy - maybe a bug.
还要仔细检查并确保您没有使用诸如innerWidth或outerHeight 之类的变量名称。这就是我的问题。IE9 和 Chrome 渲染得很好，但 Firefox (33.0) 变得疯狂 - 可能是一个错误。
回答by Радислав Ялилов
Insert svg in flex container and add property flex: auto; to svg. It works for me
在 flex 容器中插入 svg 并添加属性 flex: auto; 到 svg。这个对我有用
回答by dado
Curiously, "100%" worked for width but nor for height. I ended setting both to innerWidth/innerHeight. Firefox 31.0 on CentOS6. FYI
奇怪的是，“100%”适用于宽度，但不适用于高度。我结束了将两者设置为innerWidth/innerHeight。CentOS6 上的 Firefox 31.0。供参考
