我在 Firefox 中遇到了这个问题，或者可能是我使用了错误的东西，但我使用的是这样的 svg 图像：
<img src="image.svg" alt="some image">
浏览器将它们呈现如下：
我可以让他们像.png它工作得很好，但我需要它们.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>
Update 2
试图移动fill属性来自<mask>到它的子元素<use>就像在this https://stackoverflow.com/questions/24608740/svg-not-rendering-properly-in-firefox问题，并没有解决问题。
我使用的是 Firefox 55.0.3。
我不知道为什么 FF 这个文件有问题。您可能想将此作为错误报告给他们。
幸运的是，有一个简单的修复方法。去掉 Illustrator 添加的那些有些不必要的蒙版。
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
