CSS: Utilizzo svg grezzo nel parametro URL di un'immagine di sfondo in IE

Question

Quindi, sto cercando di fare qualcosa di simile:

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>"); 
} 

Vedi qui: http://jsfiddle.net/trxkcx41/4/

Questo funziona magnificamente in versioni correnti Chrome, Safari (OS X e iOS) e Firefox. Tuttavia, l'SVG non appare affatto in IE 9, 10 o 11.

È perché questo non è supportato in IE, o perché sto facendo qualcosa di sbagliato?

[AGGIORNAMENTO CON SOLUZIONE]

Grazie a hungerstar, ho questo lavoro. Per riassumere la sua raccomandazione, avevo bisogno di apportare le seguenti modifiche:

1. Modificare il tipo di dati data:image/svg+xml;utf8-data:image/svg+xml;charset=utf8 (vale a dire, charset= è richiesto)

2. URL codificare la svg. Per ridurre al minimo la codifica dell'URL, utilizzare ' anziché " per racchiudere gli attributi. Quindi, nel mio caso, solo il < e > dovevano essere codificati.

A, in ultima analisi, il mio CSS si presentava così:

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"); 

Answer 1

IE non sembra supportare utilizzando utf8 in un data URI, è semplicemente essere più pignoli su di esso. Vedere questo Codepen Blog Post per maggiori dettagli, ma qui ci sono i punti salienti:

I punti di autore a RFC2397 e mette in evidenza:

dati: [<MediaType>] [; base64], <dati>

Il <mediatype> è una specifica di tipo di supporto Internet (con parametri facoltativi). L'aspetto di "; base64" indica che i dati sono codificati come base64. Senza "; base64", i dati (come una sequenza di ottetti) sono rappresentati utilizzando la codifica ASCII per ottetti nell'intervallo di caratteri URL sicuri e utilizzando la codifica standard% xx hex di URL per ottetti al di fuori di tale intervallo. Se si omette il tipo di telefono < >, il valore predefinito è text/plain; charset = US-ASCII. Come una scorciatoia, "text/plain" può essere omesso ma viene fornito il parametro charset.

• maggior parte dei browser sono indulgenti circa il charset = stringa, ma è richiesto per Internet Explorer. Ciò significa che è necessario utilizzare ;charset=utf8, anziché ;utf8,.
• Da sopra, "Senza"; base64 ", i dati (come una sequenza di ottetti) sono rappresentati utilizzando la codifica ASCII per ottetti nell'intervallo di caratteri URL sicuri e utilizzando la codifica standard% xx hex di URL per ottetti esterni quella gamma." Il che significa che è necessario codificare per percentuale caratteri non protetti dall'URL. Ad esempio, <svg> a %3Csvg%3E. È possibile ridurre al minimo la quantità di codifica percentuale che deve essere eseguita utilizzando virgolette singole ' invece di virgolette doppie " .

Answer 2

per IE9 devo URL codificare l'intero codice SVG.

Questo è il mio flusso di lavoro per SVG immagini di sfondo.

Prima passato Codice e SVG qui per ottimizzarlo: https://jakearchibald.github.io/svgomg/ ("pasta di markup")

è possibile rimuovere il "viewBox", ma essere sicuri che "larghezza" e "altezza" sono definiti nel codice SVG, IE9 ha bisogno di questo per una migliore Implementazione CSS.

Ora avete qualcosa di simile:

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

In questo caso devo aggiungere un colore di riempimento, perché non c'era nessuno definito. così ho aggiungere:

fill="#cc0000" 

alla fine dell'elemento percorso (se ci sono un paio di elementi di percorso in un gruppo ("g") devi mettere questo colore di riempimento a tutti questi se. lo SVG ha tratti uguali con tratti come stroke="#cc0000").

Ora abbiamo il seguente codice SVG:

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

codificare l'intero codice SVG qui: http://meyerweb.com/eric/tools/dencoder/

in modo da ottenere:

%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 

almeno mettere tutta questa cosa insieme nel tuo 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'); 
    } 

Alcuni vantaggi che mi ha spinto noci:

essere sicuri per avvolgere il codice SVG sfondo con ' nel CSS, perché all'interno del SVG usiamo "!

Assicurarsi da usare

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

nient'altro.

Ora l'SVG viene visualizzato con il colore "# cc0000" (rosso scuro) anche in IE9 su Windows.

Con questo URL codificato SVG posso ancora cambiare il colore con una variabile PHP. Per esempio ho appena sostituire "CC0000" con:

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

Lo faccio per i modelli di WordPress in modo che il cliente può scegliere il colore dell'icona nel backend.

Answer 3

Solo una nota per questo. In IE 11 puoi usare charset = utf8. Devi codificare l'URL almeno < e > (a condizione che tu usi '' per i valori degli attributi non "". Inoltre, fai attenzione se usi caratteri non ASCII. Devi fornire il loro valore codificato UTF-8 - cioè trova alcuni strumenti che ti danno il codice UTF-8 per il personaggio (come Babel Map) e poi lo forniscono in forma codificata URL, cioè volevo rendere il carattere ▾ (U+25BE). La rappresentazione UTF-8 del carattere è \xE2\x96\xBE e %E2%96%BE in codifica URL modulo.

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"); 

Answer 4

Questa soluzione funziona bene per me, io uso il charset = utf8 al posto di utf8.