Изменение цвета заливки изображения SVG, загруженного URL-адресом данных в таблицу стилей

Question

Я хочу иметь разные цветные изображения, которые загружаются внутри таблицы стилей через свойство url ('data ...'). Все изображения встроены внутри css-файла. Единственное отличие - это цвет заливки, который следует использовать. Вот мой текущий код:

.icon.save { 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23666666" d="M397.944 258.597l0 22.9362c0,7.22714 -5.91315,13.1403 -13.1403,13.1403l-292.742 0c-7.22714,0 -13.1403,-5.91315 -13.1403,-13.1403l0 -22.9362 319.022 0zm-354.98 -209.156l395.673 0c3.31637,0 6.02912,2.65813 6.02912,5.90747l0 403.401c0,3.24863 -2.71346,5.90747 -6.02912,5.90747l-86.1661 0 0 -20.4653 9.24335 0 0 6.27915 68.7657 0 0 -386.843 -32.536 0 0 184.33 -319.022 0 0 -184.33 -27.8006 0 0 370.473 16.4964 16.3701 42.2982 0 6.30256 -6.27915 5.25633 0 0 14.7884 -5.69823 5.67695 -54.0028 0 -24.8386 -24.6481 0 -384.66c0,-3.24934 2.71275,-5.90747 6.02877,-5.90747zm299.498 419.709l-210.978 0 0 -127.463c0,-7.78962 6.37313,-14.1628 14.1624,-14.1628l182.654 0c7.78927,0 14.1624,6.37313 14.1624,14.1628l0 127.463zm-177.925 -133.337l54.4986 0 0 113.007 -54.4986 0 0 -113.007z"/></svg>'); 
} 

.icon.save:hover, .icon.save.bright { 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M397.944 258.597l0 22.9362c0,7.22714 -5.91315,13.1403 -13.1403,13.1403l-292.742 0c-7.22714,0 -13.1403,-5.91315 -13.1403,-13.1403l0 -22.9362 319.022 0zm-354.98 -209.156l395.673 0c3.31637,0 6.02912,2.65813 6.02912,5.90747l0 403.401c0,3.24863 -2.71346,5.90747 -6.02912,5.90747l-86.1661 0 0 -20.4653 9.24335 0 0 6.27915 68.7657 0 0 -386.843 -32.536 0 0 184.33 -319.022 0 0 -184.33 -27.8006 0 0 370.473 16.4964 16.3701 42.2982 0 6.30256 -6.27915 5.25633 0 0 14.7884 -5.69823 5.67695 -54.0028 0 -24.8386 -24.6481 0 -384.66c0,-3.24934 2.71275,-5.90747 6.02877,-5.90747zm299.498 419.709l-210.978 0 0 -127.463c0,-7.78962 6.37313,-14.1628 14.1624,-14.1628l182.654 0c7.78927,0 14.1624,6.37313 14.1624,14.1628l0 127.463zm-177.925 -133.337l54.4986 0 0 113.007 -54.4986 0 0 -113.007z"/></svg>'); 
} 

Как вы можете видеть, единственное отличие заключается в атрибуте fill = "" пути. Есть ли другой способ с любым встроенным кодом css, который я могу добавить?

Answer 1

Единственный способ, который я нашел, - это сгенерировать мои svgs с помощью небольшого (самостоятельно написанного) инструмента, который преобразует цвета в соответствии с моими потребностями. Но нет решения, которое может изменить цвета во время выполнения. Поэтому каждый цвет удваивает размер для каждого изображения. Однако инструмент добавляет возможность генерировать что-то вроде imagemap как css. Часто это используется для значков png, которые расположены на большом снимке, чтобы избежать нескольких HTTP-запросов.

Answer 2

Единственный способ, который я вижу, - создать CSS с помощью JavaScript, после вставки fill="white" и один раз fill="%23666666". Изображения, которые включены через background-image или <img>, не могут быть созданы с использованием CSS.

Answer 3

Что-то, как это должно работать:

var green = '3CB54A'; 
var red = 'ED1F24'; 
var svg = '<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" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';  
var encoded = window.btoa(svg); 
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")"; 

Fiddle Here