Jak używać wartości szesnastkowej dla SVG w FireFox

Question

Ładowanie adresu URL SVG do strony internetowej przy użyciu klasy CSS. Działa to w każdej przeglądarce, którą przetestowałem, z wyjątkiem Firefoksa 35.0.1 (i prawdopodobnie wcześniejszych wersji Firefoksa). Zauważyłem, że w przypadku użycia rzeczywistej nazwy koloru, np. Białej, dla obrysu działa ona zgodnie z oczekiwaniami, ale kiedy używam wartości szesnastkowej, np. #ffffff, w ogóle nie pokazuje ona obrysu. Według MDN, hex values are supported.

Tak, to działa prawidłowo:

.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> 

Ale tego nie robi:

.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> 

Czy jest jakiś sposób mogę użyć wartości szesnastkowy koloru tutaj? To naprawdę pomoże utrzymać mój Sass tak suchy, jak to tylko możliwe.

Answer 1

Znak # to reserved in URLs jako początek identyfikatora fragmentu. Musisz zakodować to jako% 23, aby adres URL był poprawny. To nie jest błąd przeglądarki Firefox.

Alternatywnie można zakodować cały ciąg przy użyciu base64.