Come utilizzare un valore esadecimale per SVG in FireFox

Question

Sto caricando un URL SVG in una pagina Web utilizzando una classe CSS. Funziona su tutti i browser che ho provato tranne Firefox 35.0.1 (e probabilmente versioni precedenti di Firefox). Ho notato che quando si utilizza un nome di colore reale, ad esempio bianco, per il tratto, funziona come previsto, ma quando uso un valore esadecimale, ad esempio #ffffff, non mostra affatto un tratto. Secondo MDN, hex values are supported.

Quindi, questo funziona bene:

.ui-stroke-icon .ui-icon-head:after, 
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="white" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg> 

Ma questo non lo fa:

.ui-stroke-icon .ui-icon-head:after, 
    background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 540" enable-background="new 0 0 540 540" xml:space="preserve"><path fill="none" stroke="#ffffff" stroke-width="8" stroke-miterlimit="10" d="...svg coordinates here..."/></svg> 

C'è un modo posso utilizzare un valore esadecimale per il colore qui? Ciò aiuterebbe davvero a mantenere il mio Sass il più asciutto possibile.

Answer 1

Il carattere n. È reserved in URLs come inizio di un identificatore di frammento. Devi codificare questo come% 23 affinché l'URL sia valido. Questo non è un bug di Firefox.

In alternativa è possibile codificare l'intera stringa utilizzando base64.