SVG 渲染但仅在 Firefox 中被切断 - 为啥?

Posted

技术标签:

【中文标题】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.innerWidthwindow.innerHeight 是解决方案。 也为我工作-谢谢! 【参考方案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】:

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

【讨论】:

【参考方案6】:

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

【讨论】:

【参考方案7】:

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

【讨论】:

以上是关于SVG 渲染但仅在 Firefox 中被切断 - 为啥?的主要内容,如果未能解决你的问题,请参考以下文章

跨域请求仅在 Firefox 中被阻止! [选项:403 禁止]

SVG 过滤器仅在添加样式属性 (Firefox) 时有效

为 DT 闪亮中的单列渲染下拉列表,但仅在单元格单击时加载并使用 replaceData()

SVG使用标记不渲染渐变Firefox

SVG 中风动画颜色在 Firefox 中正确渲染,但在 Chrome 中失败

SVG PacMan 中的鬼眼在 Firefox 中正确渲染,但在其他浏览器中不正确