Html 当SVG是编码的CSS背景图像时，如何更改SVG颜色？

我有一个在CSS文件中编码的SVG图标。如何在悬停时更改其颜色，而不使用不同颜色的重复图标

在我的CSS文件中，我有：

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 511.999 511.999'%3E%3Cpath fill='red' d='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 0 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.716-16.715zM470.266 167.256c-2.692-.456-128.739 0-128.739 0l17.606-48.032c12.148-33.174 4.283-83.827-29.424-101.835-10.975-5.864-26.309-8.809-38.672-5.697-7.09 1.784-13.321 6.478-17.035 12.767-4.271 7.233-3.83 15.676-5.351 23.696-3.857 20.342-13.469 39.683-28.354 54.2-25.952 25.311-106.571 98.331-106.571 98.331v267.45h278.593c37.592.022 62.228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E");

从fill='red'属性中可以看到它是红色的

---

当用户将鼠标悬停在具有此SVG背景的图标上时，如何将其颜色更改为蓝色？我看到的唯一解决方案是使用相同的SVG代码创建另一个CSS类，除了使用不同的填充颜色，但这只会增加文件大小，而且似乎是多余的

您可以使用过滤器属性：

.box{
背景：url("数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg'viewBox='0 511.999 511.999''3E%3Cpath fill='red'd='M83.578 167.256H16.716C7.524 167.256 0 174.742 0 183.971v300.881c0 9.225 7.491 16.713 16.716 16.713h66.862c9.225 16.716-7.489 16.716-16.713V183.971c0-9.229-7.525-16.715-16.715-16.716-16.716-16.716-16.716-16.716-7.525-16.715-16.715 ZM470.266-128-128-730.7397.7.7 7.7 7 7.7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 7 228-41.958 43.687-74.749 22.101-14.155 29.66-43.97 16.716-66.862 22.102-14.155 29.66-43.97 16.716-66.862 38.134-24.423 25.385-84.871-19.172-92.407z'/%3E%3C/svg%3E“）中心/盖；
宽度：50px；
高度：50px；
}
.box:悬停{
过滤器：色调旋转（210度）；
}

---

这是我的解决方案。我选择使用

encodeURIComponent（）

进行数据uri编码。虽然编码了，但这将生成一个可读的代码，您可以在javascript中操作。在这种情况下，我编写了一个函数

setFill（）

在数据uri中添加

fill='${color}

test.addEventListener（“mouseover”，（）=>{
设置填充（测试，“金”）；
});
test.addEventListener（“mouseleave”，（）=>{
设置填充（测试，“黑色”）；
});
函数setFill（元素、颜色）{
element.style.background=`url（“数据：image/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg'viewBox='0 24 24'%3E%3Ctitle%3Ethumb up%3C/title%3E%3Cpath d='M0 0h24v24h-24z'fill='none'%3E%3C/path%3E%3Cpath fill='${color}4.2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-6.31l.95-4.57.57.03-.3-3.3-3.3-3.3-3.3-.4-3.3-3.3-3-3.3-3-3.3-3-3-3.3-3-3.3-3-3-3.3-3-3.3-0 0 0 0--0.3.3.7-0-0-0 0 0-7-7.7-.7-.17-.17-.41-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-.17-3E）`；
}

#测试{
宽度：50px；
高度：50px；
边框：1px实心；
背景：url（“数据：image/svg+xml，%3Csvg xmlns='1http://www.w3.org/2000/svg（3）C.3.3.5.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.3.4 vvv24h-24h-24h-24z“填充”使用，”填充，，，，，，，，（3.3.0 0 0 0 0 0.2.4.7-17-.17-.17-.17-.79-.79-.17-.79-.17-.17-.17-17.17-1.17-1.17-1.17-1.17-1.17-1.19-1.19-1.19-1.19-1.19-1.19-1.17-1.17-1.17-1.19-1.19-1.17-1.19-1.19-1.19-1.17-1.17-1.17-1.17-1.17-1.19-1.19 1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01-.08z“%3E%3C/路径%3E%3C/svg%3E”）；
}

---

我刚刚尝试了一些对我有用的东西。 1-将代码从%3Csvg复制到svg%3E“ 2-转到 3-超过URL编码区域中的代码 4-在上面的URL解码区域，用十六进制格式的颜色替换填充字段。 5-在Url编码区域（由%27包围）中找到编码格式的颜色。例如，“#ff9500”%27%23ff9500%27，所以#ff9500%23ff9500。 6-将编码颜色复制到编码代码中，它应该可以工作！！

---

如果是这种情况，请告诉我

能否将

svg

移动到标记中，而不是将其作为

背景图像

？如果是这样，你可以看看有趣的。以前从未见过色调-旋转（）。如果我想更改为更具体的颜色，这将如何工作？假设它的首字母填写为#33af8d，我希望悬停颜色为#126d7d？有没有什么计算器可以用来计算正确的学位？嗯，我明白了。你认为我将这些SVG整合为编码背景图像的方式是最有效的方式吗？如果我只是将背景图像链接到.SVG文件，那么更改颜色会更容易吗？