Firefoxがsvgを正しくレンダリングしない

debugcn 投稿 Dev

cs.matyi

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>からその子要素に移動しようとしましたが、問題は修正されませんでした。Firefox55.0.3を使用しています。<use>

ポール・ルボー

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]