☰

CSS: IE の背景画像の URL パラメータで生の svg を使用する 質問する

tag-icon • tag-icon css internet-explorer svg
CSS: IE の背景画像の URL パラメータで生の svg を使用する 質問する

そこで、私は次のようなことをやろうとしています:

div {
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100px 100px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none'><rect x='0' y='40' width='100' height='20' /><rect x='40' y='0' width='20' height='100' /></svg>");
}

こちらをご覧ください:http://jsfiddle.net/trxkcx41/4/

これは、現在のバージョンの Chrome、Safari (OS X および iOS)、Firefox では問題なく動作します。ただし、IE 9、10、11 では SVG がまったく表示されません。

これは IE でサポートされていないためでしょうか、それとも私が何か間違っているのでしょうか?

[解決策を更新]

感謝ハンガースター、私はこれを機能させました。彼の推奨事項を要約すると、次の変更を加える必要がありました。

  1. データ型を から に変更しますdata:image/svg+xml;utf8（data:image/svg+xml;charset=utf8つまり、charset=は必須です）

  2. svg を URL エンコードします。URL エンコードを最小限に抑えるには、'の代わりにを使用して"属性を囲みます。したがって、私の場合は、 と のみを<エンコード>する必要がありました。

最終的に、私の CSS は次のようになりました。

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' style='fill:red; stroke:none' %3E%3Crect x='0' y='40' width='100' height='20' /%3E%3Crect x='40' y='0' width='20' height='100' /%3E%3C/svg%3E");

ベストアンサー1

IEはデータURIでの使用をサポートしているようですutf8が、それは単にうるさいこれについて。これを参照してくださいCodepen ブログ投稿詳細については、以下をご覧ください。主なポイントは次のとおりです。

著者は指摘するRFC2397ハイライト:

データ:[<メディアタイプ>][;base64],<データ>

<mediatype> は、インターネット メディア タイプ仕様です (オプションのパラメータ付き)。";base64" の出現は、データが base64 としてエンコードされていることを意味します。";base64" がない場合、データ (オクテットのシーケンス) は、安全な URL 文字の範囲内のオクテットに対しては ASCII エンコードを使用して表され、その範囲外のオクテットに対しては URL の標準 %xx 16 進エンコードを使用して表されます。<mediatype> が省略された場合、デフォルトで text/plain;charset=US-ASCII になります。省略形として、"text/plain" は省略できますが、charset パラメータは提供されます。

  • ほとんどのブラウザは charset= 文字列に関して寛容ですが、Internet Explorer では必須です。つまり、;charset=utf8,の代わりにを使用する必要があります;utf8,。
  • 上から、「「;base64」がない場合、データ (オクテットのシーケンスとして) は、安全な URL 文字の範囲内のオクテットに対しては ASCII エンコードを使用して表され、その範囲外のオクテットに対しては URL の標準 %xx 16 進エンコードを使用して表されます。」つまり、URL セーフではない文字をパーセント エンコードする必要があります。たとえば、<svg>の場合、二重引用符の代わりに%3Csvg%3E一重引用符を使用すると、必要なパーセント エンコードの量を最小限に抑えることができます。'"

おすすめ記事