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

Question

У меня есть фоновое изображение SVG в элементе :: before: https://codepen.io/sshiling/pen/PVWgdW
Я хочу изменить его цвет при наведении, фокусе, активном.Я пытаюсь использовать этот метод:
: hover :: before path {fill: # 000;}
Но это не работает

Я могу просто скопировать свой встроенный SVG и изменить его цвет вручную, но, возможно, тамэто способ изменить его с помощью «пути заполнения» или что-то вроде этого.

HTML

<div class="field">
   <div class="field__search"></div>
</div>

CSS

.field {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #849d8f;
}

.field__search {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 66px;
    position: relative;
}

.field__search::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><defs><style>.cls-1 {fill: #fff;fill-rule: evenodd;}</style></defs><path id='Лупа' class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)'/></svg>");
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 1;
}

.field__search:hover::before path,
.field__search:focus::before path,
.field__search:active::before path {
    fill: #000;
}

Answer 1

Проблема в том, что вы используете URI данных SVG в качестве фонового изображения, а это означает, что его свойства и стили не могут быть изменены - разметка SVG не является частью DOM и поэтому недоступна для CSS.Это похоже на ссылку .svg пути к изображению в вашем свойстве background-image.

Единственное решение - как вы и предполагали - просто закодировать новый SVG для состояния наведения:

.field {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #849d8f;
}

.field__search {
  width: 35px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 66px;
  position: relative;
}

.field__search::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#fff' /></svg>");
  background-repeat: no-repeat;
  background-position: 0 0;
  opacity: 1;
}

.field__search:hover::before,
.field__search:focus::before,
.field__search:active::before {
  background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#000' /></svg>");
}

<div class="field">
  <div class="field__search"></div>
</div>

Другое решение потребует внесения изменений в вашу разметку, где вы фактически встраиваете SVG в карту изображений и используете элемент <use> для ссылки на символ.Тем не менее, это означает, что вам будут добавлены ненужные пустые элементы в разметку для стилистических / визуальных целей, что может вызывать недовольство некоторых:

.field {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #849d8f;
}

.field__search {
  width: 35px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 66px;
  position: relative;
}

.field__search__icon {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  opacity: 1;
  display: block;
  fill: #fff;
}

.field__search:hover .field__search__icon,
.field__search:focus .field__search__icon,
.field__search:active .field__search__icon {
  fill: #000;
}

<!-- Symbol map -->
<svg xmlns="http://www.w3.org/2000/svg" style="width: 0; height: 0; visibility: none;">
  <symbol id="my-custom-icon" width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' /></symbol>
</svg>

<div class="field">
  <div class="field__search">
    <svg class="field__search__icon">
      <use xlink:href="#my-custom-icon" />
    </svg>
  </div>
</div>