如何改变svg填充颜色时，使用基础-64背景图像数据？

Question

我在一个项目中使用SVG，加载如下所示的css：

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');

我有一些悬停状态，通过改变箭头的填充颜色来突出显示。

现在，我只是简单地应用相同的svg数据填充部分(填充%3A%09%23f47216%3B%7D%3C，其中f47216是颜色)更改为右/新颜色。效果很好。不过，我想知道是否还有其他更聪明的方法。

Answer 1

我想就我自己的问题发个答案。不完全是一个答案，因为它并不意味着svg作为背景和base64，但这是我目前的替代方式，如果您只需要单色图标:只需使用svg作为css掩码，并改变背景色。然后，还可以对鼠标事件应用转换。我的意思是这样的：

mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" xml:space="preserve"><path d="M11.432 9.512a.636.636 0 0 1 0 .918L2.12 19.742a.636.636 0 0 1-.458.201.637.637 0 0 1-.46-.201l-1-.998C.068 18.609 0 18.459 0 18.285s.068-.329.199-.461l7.854-7.852L.199 2.118A.638.638 0 0 1 0 1.66c0-.174.068-.327.199-.46l1-.998A.634.634 0 0 1 1.66 0c.172 0 .325.068.458.201l9.314 9.311z"/></svg>');
mask-size: auto 12px;
mask-repeat: no-repeat;
transition: background-color 200ms;
background-color: #ff0000;

请看这个小提琴来更多的代码和演示：

https://jsfiddle.net/o25beLqj/

还请注意以下几点：

• 掩码-图像中没有base64代码。它刚刚被data:image/svg+xml;utf8,所取代
• 掩码css属性与css背景属性大致相同，请查看文档，您将看到您可以做很多事情，它们可以在各种用例中替换背景图像。

Answer 2

使用CSS的过滤器属性。对我来说，我想将图标的颜色更改为白色：

filter: grayscale(1) brightness(2);

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

小提琴在这里