Question

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

Answer 1

我不知道FF为什么会遇到此文件的问题。您可能希望将此报告为错误。

幸运的是，有一个简单的解决方法。摆脱Illustrator添加的那些不必要的面具。

＆＃13;

public T removeItem(){

    int n = array.length;
    T t = array[0];
    if(empty())
        return null;
    for(int i = 0; i < n -1; i++) {
        array[i] = array[i + 1];
    }
    numberOfItems--; // Missed piece
    return t;

}

＆＃13;

Answer 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>

Firefox无法正确呈现svg

2 个答案: