Firefox 无法正确呈现 svg答案

【问题标题】：Firefox not rendering svg properlyFirefox 无法正确呈现 svg
【发布时间】：2018-03-01 06:02:02
【问题描述】：

我在 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>

更新 2

尝试将fill 属性从<mask> 移动到其子元素<use>，就像在this 问题中一样，但没有解决问题。我使用的是 Firefox 55.0.3。

【问题讨论】：

它们被渲染了：是渲染质量差的问题和问题吗？
将此 svg 作为元素看起来不错（Win10 上的 Fx）。你看到img[src="*.svg"] 和<svg> 之间有什么区别吗？
@FelipeAls 还是一样。渲染效果不佳
无法在 FF56 上重现 jsfiddle.net/1oym0uny
@cs.matyi 它在我的 Maca 上的 Firefox 浏览器中正常工作，我已经编辑了您的问题并正确插入了代码，所以请批准它，以便我们所有人都可以检查。

标签： css firefox svg

【解决方案1】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg fix</title>
    <style>
        .icon {
            width: 24px;
            height: 24px;

        }
        .icon path {
            fill:#000;
        }
    </style>
</head>
<body>
<img class="icon" src="icon-fixed.svg" alt="fixed SVG">
<!--PUT BELOW CODE IN NEW DOCUMENT AND SAVE AS icon-fixed.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.3,9.3V7.7c0-0.7,0.2-1.1,1.3-1.1H16V4h-2.3c-2.9,0-3.8,1.3-3.8,3.6v1.8H8V12h1.9v8h3.5v-8h2.4L16,9.3H13.3z" />
</svg>-->
</body>
</html>

【讨论】：

我会使用它们（以前一直使用它们），但我们的 UI 团队喜欢使用自己的图标，现在没有时间与它们争论......
图标看起来像标准问题？如果您赶时间，只需将 svg 代码直接放在页面中即可。要求他们整理 Illustrator 文件中的废话，这样您就只有所需的裸露路径。另外我建议使 svg 可能比画布小一半到一个像素，然后垂直和水平居中。过去我有一些小的剪裁，路径一直延伸到边缘。所以画布大小是 24px X 24px 但路径是 23px X 23px。希望这有意义吗？祝 UI 队友好运。
也试过了，可惜没用。顺便谢谢你！

【解决方案2】：

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

【讨论】：