如何更改::在悬停，聚焦，活动的SVG背景图像颜色之前

Question

我在:: before元素中有SVG背景图像：https://codepen.io/sshiling/pen/PVWgdW
我想在悬停，对焦，活动时更改其颜色。我尝试使用此方法：
：hover :: before path {     填充：＃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无法使用。它是类似于在您的.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>