web-dev-qa-db-ja.com

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で美しく機能します。ただし、SVGはIE 9、10、または11には表示されません。

これはIEでサポートされていないためですか、それとも何か問題がありますか？

[ソリューションで更新]

hungerstar のおかげで、これは機能しています。彼の提案を要約するために、私は次の変更を行う必要がありました。

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

  2. URLはSVGをエンコードします。 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");
cssinternet-explorersvg
27
mattstuehler

IEはデータURIでのutf8の使用をサポートしているように見えますが、単にそれについてうるさいです。詳細は Codepen Blog Post を参照してください。ただし、ハイライトは次のとおりです。

著者は RFC2397 を指摘し、強調します。

データ：[<mediatype>] [; base64]、<data>

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

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

IE9の場合SVGコード全体をURLエンコードする必要があります。

これはSVG背景画像の私のワークフローです。

最初にSVGコードをここに貼り付けて最適化します： https://jakearchibald.github.io/svgomg/ （ "paste markup"）

「viewBox」は削除できますが、「width」と「height」がSVGコードで定義されていることを確認してください。IE9は、CSSの実装を改善するためにこれを必要とします。

今あなたは次のようなものを持っています：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50"/></svg>

この場合、何も定義されていないため、塗りつぶしの色を追加する必要があります。だから私は追加します：

fill="#cc0000"

path要素の最後に（グループ（ "g"）にいくつかのパス要素がある場合）、これらすべてにこの塗りつぶし色を配置する必要があります。SVGにストロークがある場合は、 stroke="#cc0000"）のようなストロークと同じです。

これで、次のSVGコードができました。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><path d="M0 0h100L50 50" fill="#cc0000"/></svg>

ここでSVGコード全体をエンコードします。 http://meyerweb.com/eric/tools/dencoder/

だからあなたは得る：

%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E

少なくとも、このすべてをCSSにまとめます。

.Apple {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M0%200h100L50%2050%22%20fill%3D%22%23cc0000%22%2F%3E%3C%2Fsvg%3E');
    }

私を混乱させたいくつかの利点：

必ず SVG内で'を使用するため、CSSで"でSVGバックグラウンドコードをラップします。

必ず使用する

data:image/svg+xml;charset=UTF-8

他には何もない。

WindowsのIE9でも、SVGが「＃cc0000」（濃い赤）の色で表示されるようになりました。

このURLエンコードされたSVGでも、PHP変数で色を変更できます。たとえば、 "cc0000"を次のように置き換えるだけです。

<?php echo preg_replace("/#/", "", $textcolor); ?>

WordPressテンプレートに対してこれを行うので、顧客はバックエンドでアイコンの色を選択できます。

enter image description here

11
Henning Fischer

これへのちょうどメモ。 IE 11では、charset = utf8を使用できます。少なくとも<と>をURLエンコードする必要があります（属性に''を使用する場合）値は""ではありません。また、ASCII以外の文字を使用する場合は注意してください。UTF-8でエンコードされた値を指定する必要があります。つまり、文字にUTF-8コードを提供するツール（Babelなど）を見つけます。マップ）してから、URLエンコードされた形式で提供します。つまり、▾文字（U+25BE）をレンダリングしたかったのです。文字のUTF-8表現は\xE2\x96\xBEおよび%E2%96%BEですURLエンコード形式。

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
0
Đonny