Firefox 无法正确呈现 svg

Question

我在 Firefox 中遇到了这个问题，或者我使用了错误的东西，但我使用了这样的 svg 图像：

<img src="image.svg" alt="some image">

浏览器将它们呈现如下：

我可以让他们喜欢.png ，而且效果很好，但我需要他们.svg

使用 SVG 源更新

<img src="image.svg" alt="some image">

更新 2

试图像在这个问题中一样将fill属性从<mask>它的子元素移动到它的子元素，但没有解决问题。我正在使用 Firefox 55.0.3。<use>

Answer 1

我不知道为什么 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>