インラインSVGの背景がInternet Explorer 11で機能していません

Question

私のCSSには、以下のインラインSVGが背景画像として定義されています。

div { 
    border: 1px solid black; 
    background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>"); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100%; 
} 

Chrome、Firefox、Edgeではうまく動作しますが、Internet Explorer 11ではうまく動作しません。なぜですか？

JSfiddle here.

Answer 1

は、あなたのSVGをエンコードする完全なURLを持っています。

あなたがVSCodeを使用している場合は、そこにあなたのためにこれをやる「URLエンコード」と呼ばれる拡張機能が...あるか、簡単に1つのオンラインを見つけることができます：私も削除したhttps://meyerweb.com/eric/tools/dencoder/

注意「バージョン」属性と「;のcharset = UTF8」の部分ではなく、必要に応じて確認してください、しかし、物事をクリアする...

div { 
 
    border: 1px solid black; 
 
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2010%2010'%3E%3Cpath%20d%3D'M2%2010%20L8%200%20L10%200%20L10%2010'%20fill%3D'%238A92DF'%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: 100%; 
 
    width: 500px; 
 
    height: 500px; 
 
}

<div></div>