Firefox无法正确呈现svg [英] Firefox not rendering svg properly
问题描述
我在Firefox中遇到了这个问题,或者我使用的是错误的东西,但是我使用的是svg图像,如下所示:
I came with this issue in Firefox, or maybe I'm using something wrong, but I use svg images like this:
<img src="image.svg" alt="some image">
然后浏览器将其呈现如下:
And the browser rendering them like this:
我可以像.png
那样使用它们,并且效果很好,但是我在.svg
I can have them like .png
and it works fine, but I need them in .svg
使用SVG源进行更新
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/>
<path id="c" d="M0 0h24v24H0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="#000" xlink:href="#a"/>
<g mask="url(#b)">
<use fill="#232323" xlink:href="#c"/>
</g>
</g>
</svg>
更新2
尝试将fill
属性从<mask>
移动到其子元素<use>
,就像在
Tried to move the fill
attribute from <mask>
to its child element <use>
just like in this question, and didn't fixed the issue.
I'm using Firefox 55.0.3.
推荐答案
我不知道为什么FF对此文件有问题.您可能需要将此作为错误报告给他们.
I don't know why FF is having a problem with this file. You may want to report this as bug to them.
幸运的是,有一个简单的修复程序.摆脱Illustrator添加的那些有些不必要的蒙版.
Luckily there is a simple fix. Get rid of those somewhat unnecessary masks that Illustrator adds.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<path d="M13.333 9.333V7.746c0-.717.159-1.08 1.271-1.08H16V4h-2.33c-2.853 0-3.795 1.308-3.795 3.554v1.78H8V12h1.875v8h3.458v-8h2.35L16 9.333h-2.667z"/>
</svg>
这篇关于Firefox无法正确呈现svg的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!