更改样式表中由data-URL加载的SVG图像的填充颜色

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

我看到的唯一方法是，一旦插入fill="white"和一次fill="%23666666" ，就通过JavaScript生成CSS。 通过background-image或<img>包含background-image无法使用CSS设置样式。

Answer 2

我发现的唯一方法是使用小型（自行编写）工具生成svg，该工具会转换颜色以适合我的需求。 但是没有解决方案可以在运行时更改颜色。 因此，每种颜色会使每个图像的尺寸加倍。 但是，该工具增加了生成像css之类的图像映射的功能。 通常，这用于png图标，这些图标排列在大图片上，以避免出现多个http请求。

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

小提琴在这里