更改样式表内由 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

我看到的唯一方法是通过 JavaScript 生成 CSS，插入一次

fill="white"

和一次

fill="%23666666"

。通过

background-image

或

<img>

包含的图像无法使用 CSS 设置样式。

Answer 2

我发现的唯一方法是使用一个小型（自己编写的）工具生成 svgs，该工具可以转换颜色以满足我的需求。但没有解决方案可以在运行时更改颜色。因此，每种颜色的每个图像的尺寸都会增加一倍。然而，该工具增加了生成图像映射之类的 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+")";

在这里摆弄

Answer 4

一种解决方案是使用这样的面具：

.icon.save {
  mask: url("data:image/svg...") center no-repeat;
  background: #666666;
}

.icon.save:hover, .icon.save.bright {
  background: #ffffff;
}

它可能不适合所有情况，但它对我有用。