21

我正在使用使用 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%");

为什么这行得通，发生了什么？

4

7 回答 7

18

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

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

于 2012-10-11T04:32:14.573 回答
2

我也面临同样的问题

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

为我工作。

于 2013-05-29T09:10:46.070 回答
2

在 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');
于 2014-12-17T15:39:32.840 回答
0

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

于 2014-11-19T22:39:12.603 回答
0

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

于 2015-01-23T18:54:24.287 回答
0

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

于 2019-05-30T00:25:20.530 回答
0

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

于 2021-10-22T09:50:33.150 回答