SVG 渲染但仅在 Firefox 中被切断 - 为什么？答案

【问题标题】：SVG renders but gets cut off in Firefox only - why?SVG 渲染但仅在 Firefox 中被切断 - 为什么？
【发布时间】：2012-10-01 14:33:03
【问题描述】：

我正在使用使用 SVG 的 d3js 创建图表。在 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("width", "100%").attr("height", "100%");

为什么会这样？发生了什么？

【问题讨论】：

.attr("width", "100%").attr("height", "100%") 对我不起作用。 100% 在 Firefox 19.0 (Mac) 中没有任何区别。就我而言，window.innerWidth 和 window.innerHeight 是解决方案。
也为我工作-谢谢！

标签： javascript firefox svg cross-browser d3.js

【解决方案1】：

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

特别是，过去缺少宽度和高度属性被视为等同于将它们都设置为 100%，但实际上在 CSS 中设置宽度或高度并不能很好地发挥作用还有一些其他问题。所以现在，行为是，如果您设置宽度和高度，它们将被视为表示提示（就像 <img> 的宽度和高度属性一样），如果您不设置，您将获得默认的 300x150 内部大小，然后您可以覆盖根据需要设置样式规则。

【讨论】：

【解决方案2】：

我也遇到了同样的问题

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

为我工作。

【讨论】：

【解决方案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');

【讨论】：

它对我有用。顺便说一句，Edge 中也发生了同样的问题。

【解决方案4】：

奇怪的是，“100%”适用于宽度，但不适用于高度。我结束将两者都设置为 innerWidth/innerHeight。 CentOS6 上的 Firefox 31.0。仅供参考

【讨论】：

【解决方案5】：

还要仔细检查并确保您没有使用像 innerWidth 或 outerHeight 这样的变量名称。这就是我的问题。 IE9 和 Chrome 可以很好地呈现它，但 Firefox (33.0) 变得疯狂 - 可能是一个错误。

【讨论】：

【解决方案6】：

在 flex 容器中插入 svg 并添加属性 flex: auto;到 svg。它对我有用

【讨论】：

【解决方案7】：

尤其是小型 SVG 图标时遇到此问题。通过使其大于绘制的图像来编辑 SVG 的 viewBox 属性解决了我的问题。

【讨论】：