SVG在Firefox中不能正确呈现 [英] SVG not rendering properly in Firefox

问题描述

我在Firefox中使用SVG渲染时遇到问题。虽然它可以在Safari，Chrome甚至IE浏览器中运行，但在Firefox中无法使用。检查元素看起来层是在那里，但只有背景是可见的，就好像它的Z-索引高于其他的Z-索引。

呈现在Firefox：
Firefox中的SVG徽标

链接到原始源文件： SVG文件

感谢您的帮助。

PS：我使用Sketch 3导出svg。如果有帮助的话。

.cgi？id = 995813rel =nofollow> bug 995813 。

前段时间我修正了这个错误，但是这个改变仍然在发布过程中，所以你的例子将会从Firefox 31开始正确显示，这将在22日发布2014年7月。

与此同时，如果您从< mask> 元素移动fill =white给孩子<使用> 元素，这将围绕Firefox的错误。

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.

Rendered in Firefox: SVG logo in Firefox

Link to the original source file: SVG File

Thanks for your help.

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

解决方案

You're experiencing bug 995813.

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.

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屋！