logo标签列表

火狐浏览器无法正确渲染SVG

cssfirefoxsvg
6

我在Firefox浏览器中遇到了这个问题，或者我使用方法不正确，但是我使用的是像这样的svg图像：

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

浏览器将它们呈现为以下内容：

enter image description here

我可以用 .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

尝试将<mask>标签中的fill属性移至其子元素<use>中，就像这个问题中所示，但并没有解决该问题。我正在使用Firefox 55.0.3。

它们被渲染了：是关于渲染质量差的问题和疑问吗？ - FelipeAls
这个SVG作为一个元素看起来很好（在Win10上的Fx）。你认为img[src="*.svg"]和<svg>之间有什么区别吗？ - FelipeAls
1
无法在FF56上重现 https://jsfiddle.net/1oym0uny/ - Kaiido
1
@cs.matyi，我的Mac上的Firefox浏览器可以正常工作，我已经编辑了你的问题并正确地插入了代码，请批准它以便我们所有人都可以检查。 - Jithin Raj P R
可能是与Firefox中SVG无法正确渲染问题重复。 - core114
显示剩余4条评论
2个回答
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>

-2
<!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>

enter image description here

我以前一直使用它们，但我们的UI团队喜欢使用自己的图标，现在没有时间与他们争论了... - cs.matyi
图标看起来像标准问题吗？如果您很快，只需直接将SVG代码放入页面中。请要求他们清理Illustrator文件中的垃圾，以便您仅具有必要的路径。另外，我建议将SVG的大小缩小一半到一个像素，然后在垂直和水平方向上居中。过去我曾经遇到过一些轻微的剪裁，其中路径右到非常边缘。 因此，画布大小为24px X 24px，但路径为23px X 23px。希望这讲得通？ 祝你与UI团队好运。 - Kerry7777
我也试过了，可惜它不起作用。顺便说一下，谢谢你！ - cs.matyi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接