Question

我有一个SVG图标，该图标编码在我的CSS文件中。如何在悬停时更改其颜色而又没有其他颜色的重复图标？

在我的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类，但填充颜色不同，但这只会增加文件大小，并且看起来很多余。

Answer 1

您使用filter属性：

.box {
  background: 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") center/cover;
  width: 50px;
  height: 50px;
}

.box:hover {
  filter: hue-rotate(210deg);
}

<div class="box">

</div>

Answer 2

这是我的解决方案。我选择使用encodeURIComponent()进行数据uri编码。尽管进行了编码，但它会产生可读的代码，您可以在javascript中进行操作。在这种情况下，我编写了一个函数setFill()，其中在数据uri内添加了fill='${color}'

test.addEventListener("mouseover", () => {
  setFill(test, "gold");
});

test.addEventListener("mouseleave", () => {
  setFill(test, "black");
});

function setFill(element, color) {
  element.style.background = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ethumb up%3C/title%3E%3Cpath d='M0 0h24v24h-24z' fill='none'%3E%3C/path%3E%3Cpath fill='${color}' d='M1 21h4v-12h-4v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06l-1.06-1.05-6.58 6.59c-.37.36-.59.86-.59 1.41v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01.01-.08z'%3E%3C/path%3E%3C/svg%3E")`;
}

#test{
width:50px;
height:50px;
border:1px solid;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ethumb up%3C/title%3E%3Cpath d='M0 0h24v24h-24z' fill='none'%3E%3C/path%3E%3Cpath d='M1 21h4v-12h-4v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06l-1.06-1.05-6.58 6.59c-.37.36-.59.86-.59 1.41v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01.01-.08z'%3E%3C/path%3E%3C/svg%3E");  
}

<div id="test" ></div>

这是一个工具，可帮助您使用encodeURIComponent()：SVG-encoder

对SVG进行编码

Answer 3

我只是尝试了一些对我有用的东西。 1-将您的代码从％3Csvg复制到svg％3E“ 2-转到https://mothereff.in/url 3-将您的代码粘贴到URL编码区域 4-在上面的URL解码区域中，将填充字段替换为所需的十六进制格式颜色。 5-在％27包围的Url编码区域中找到编码格式的颜色。例如，'＃ff9500'<=>％27％23ff9500％27，因此＃ff9500 <=>％23ff9500。 6-复制您的编码代码中的编码颜色，它应该可以工作！让我知道是否是这种情况

当它是经过编码的CSS背景图像时，如何在悬停时更改SVG颜色？

3 个答案: