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

问题描述

我使用d3js（使用SVG）来创建图表。查看它在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.

我修复了这个问题

var svg = d3.select（＃scatterplot）append（svg）。attr width，100％）。attr（height，100％）;

发生了什么？

推荐答案

发生了什么事情是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.

特别是，以前的情况是，缺少宽度和高度属性被视为等同于将它们都设置为100％，除非它没有真正发挥好实际上在CSS中设置宽度或高度，并有一些其他问题。所以现在的行为是，如果你设置宽度和高度，它们被视为呈现提示（就像< img> 的宽度和高度属性） t您将获得默认的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屋！