如何在悬停、焦点、活动时更改 ::before SVG 背景图像颜色

Question

我在 ::before 元素中有 SVG 背景图像：https://codepen.io/sshiling/pen/PVWgdW
我想在悬停、焦点、活动时更改它的颜色。我尝试使用这种方法：
:hover::路径前 { 填充：#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

问题在于您使用 SVG 的数据 URI 作为背景图像，这意味着它的属性和样式无法修改 - SVG 标记不是 DOM 的一部分，因此无法使用 CSS。这类似于在 background-image 属性中引用 .svg 图像路径。

正如您所怀疑的那样，唯一的解决方案是简单地为悬停状态编码一个全新的 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>