SVG データ URL の背景画像が Firefox に表示されないのはなぜですか?

Firefox で SVG データ URL 背景画像が表示されない

擬似的にデータ URL を使用して SVG を背景画像として設定する場合要素を使用すると、Firefox で画像が表示されません。これは、Firefox が URL 内の「#」文字をフラグメント識別子の先頭として扱うためです。

この問題を解決するには、データ URL コンテンツを URL エンコードする必要があります。これには、「#」文字を「#」に変換することが含まれます。以下の変更された CSS コードには、URL エンコードが組み込まれています。

content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,%3Csvg version="1.1">

データ URL コンテンツを URL エンコードすることにより、Firefox はハッシュ文字を SVG データの一部として正しく解釈し、画像を背景として表示できるようにします。

以上がSVG データ URL の背景画像が Firefox に表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。