SVG 可以渲染，但仅在 Firefox 中被切断 - 为什么？

Question

我正在使用 d3js（它使用 SVG）来创建图表。请在 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%");

为什么会起作用以及发生了什么？

Answer 1

发生的事情是，关于 svg 大小调整应该如何工作的规范得到了澄清，因此它在各种情况下都能更好地工作，并且 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

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

Answer 5

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

Answer 6

还要仔细检查并确保您没有使用 innerWidth 或 outerHeight 等变量名称。这就是我的情况的问题。 IE9 和 Chrome 渲染得很好，但 Firefox (33.0) 变得疯狂 - 也许是一个错误。

Answer 7

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

Answer 8

请尝试

svg {overflow: visible;}

。它帮助了我。