SVG 无法在 Firefox 中正确呈现 [英] SVG not rendering properly in Firefox

问题描述

我在 Firefox 中遇到 SVG 渲染问题.虽然它适用于 Safari、Chrome 甚至 IE，但它不适用于 Firefox.检查元素似乎图层在那里，但只有背景是可见的，好像它的 z-index 高于其他的 z-index.

I have a problem with SVG renderring in Firefox. Whilst it works in Safari, Chrome or even in IE, it doesn't work in Firefox. Inspecting the element it seems that the layers are there, but only background is visible as if it's z-index is higher than the z-index of the others.

在 Firefox 中呈现:Firefox 中的 SVG 标志

Rendered in Firefox: SVG logo in Firefox

原始源文件链接:SVG 文件

感谢您的帮助.

PS:我使用 Sketch 3 导出 svg.如果它有帮助.

PS: I used Sketch 3 to export the svg. If it helps somehow.

推荐答案

您遇到了 错误 995813.

我前段时间修复了这个错误，但该更改仍在发布过程中进行，因此您的示例将从 2014 年 7 月 22 日发布的 Firefox 31 开始正确显示.

I fixed this bug some time ago but that change is still making its way through the release process so your example will display correctly from Firefox 31 onwards which will be released on 22 July 2014.

与此同时，如果您将 fill="white" 从 <mask> 元素移动到子 <use> 元素，这将适用于 Firefox错误.

In the meantime if you move the fill="white" from the <mask> element to the child <use> element this will work around the Firefox bug.

这篇关于SVG 无法在 Firefox 中正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！