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.innerWidth
和 window.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】:还要仔细检查并确保您没有使用像 innerWidth 或 outerHeight 这样的变量名称。这就是我的问题。 IE9 和 Chrome 可以很好地呈现它,但 Firefox (33.0) 变得疯狂 - 可能是一个错误。
【讨论】:
【参考方案6】:在 flex 容器中插入 svg 并添加属性 flex: auto;到 svg。 它对我有用
【讨论】:
【参考方案7】:尤其是小型 SVG 图标时遇到此问题。 通过使其大于绘制的图像来编辑 SVG 的 viewBox 属性解决了我的问题。
【讨论】:
以上是关于SVG 渲染但仅在 Firefox 中被切断 - 为啥?的主要内容,如果未能解决你的问题,请参考以下文章
跨域请求仅在 Firefox 中被阻止! [选项:403 禁止]
为 DT 闪亮中的单列渲染下拉列表,但仅在单元格单击时加载并使用 replaceData()