Question

Ich habe die folgenden Inline-SVG als Hintergrundbild in meinem CSS definiert.

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%; 
} 

Es funktioniert gut in Chrome, Firefox und Edge, schlägt aber in Internet Explorer 11. Warum?

JSfiddle here.

Answer 1

Sie müssen vollständige URL Ihr svg kodieren.

Wenn Sie VSCode verwenden, gibt es eine Erweiterung „URL Encode“ das wird dies für Sie tun ... oder Sie können leicht finden, ein online abrufbar ist: https://meyerweb.com/eric/tools/dencoder/

Bitte beachte, dass ich auch entfernt haben das „Version“ Attribut und der „; charset = UTF-8“ Teil, nicht sicher, wenn nötig, aber die Dinge zu klären ...

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>