SVG 呈现但仅在 Firefox 中被切断 - 为什么? [英] SVG renders but gets cut off in Firefox only - why?

问题描述

我正在使用使用 SVG 的 d3js 创建图表.在 www.uscfstats.com/deltas 上查看它(使用 12842311 作为输入值；现在它非常被黑客攻击).

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).

在 Chrome、Safari 和 Firefox 10 上，这按预期呈现了一个完整的图表，占据了整个白框.然而，在更高版本的 Firefox 上(特别是 15)SVG 渲染的前 200 像素左右，但其余部分被截断.

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.

当我在 Firebug 中打开页面时，我可以突出显示 HTML 元素，它们似乎都在那里，就好像一些大白框覆盖了我图表的底部 75%(没有但是，任何此类 HTML 元素).我在点上有点击事件，渲染的那些我可以点击，但那些我找不到但点击它们什么也不做.

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.

我通过写作解决了这个问题

I fixed the problem by writing

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

为什么会这样，发生了什么?

Why does this work and what happened?

推荐答案

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

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.

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

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.

这篇关于SVG 呈现但仅在 Firefox 中被切断 - 为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！