Я загружаю URL-адрес SVG на веб-страницу с использованием класса CSS. Это работает в каждом браузере, который я тестировал, кроме Firefox 35.0.1 (и, возможно, более ранних версий Firefox). Я заметил, что при использовании фактического имени цвета, например белого, для штриха, он работает так, как ожидалось, но когда я использую шестнадцатеричное значение, например, #ffffff, он вообще не показывает штрих. Согласно MDN, поддерживаются шестнадцатеричные значения.
Итак, это прекрасно работает:
.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>
Но это не так:
.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>
Можно ли использовать шестнадцатеричное значение для цвета здесь? Это действительно поможет сохранить мой Сасс как можно сухим.