Как изменить цвет SVG при наведении курсора на фоновое изображение CSS?

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, как я могу изменить его цвет на синий?Единственное решение, которое я вижу, - это создать еще один CSS-класс с тем же SVG-кодом, но с другим цветом заливки, но это только увеличивает размер файла и кажется излишним.

Answer 1

Это моё решение.Я выбираю кодировку данных URI, используя encodeURIComponent().Несмотря на то, что это закодировано, вы получите читаемый код, которым вы можете манипулировать в 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>

Это инструмент, который помогает вам кодировать SVG с использованием encodeURIComponent(): SVG-encoder

Answer 2

Вы используете свойство фильтра:

.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>