Html 如何更改：：在SVG背景图像颜色悬停、聚焦、激活之前

我在：：before元素中有SVG背景图像：
我想在悬停、聚焦、激活状态下更改它的颜色。我尝试使用这种方法：
：悬停：：在路径之前{ 填写：#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;
}

.field{
宽度：100px；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：#849d8f；
}
.字段搜索{
宽度：35px；
高度：35px；
背景色：rgba（255、255、255、0.2）；
边界半径：66px；
位置：相对位置；
}
.field\u search:：before{
内容：“；
位置：绝对位置；
顶部：8px；
左：8px；
宽度：22px；
高度：22px；
背景图像：url（“数据：image/svg+xml；utf8.cls-1{fill:#fff；fill-rule:evenodd；}”）；
背景重复：无重复；
背景位置：0；
不透明度：1；
}
.field_uu搜索：悬停：：在路径之前，
.field\u搜索：焦点：：在路径之前，
.field\u搜索：活动：：在路径之前{
填写：#000；
}

问题在于，您正在使用SVG的数据URI作为背景图像，这意味着其属性和样式无法修改SVG标记不是DOM的一部分，因此不能与CSS接触。它类似于在

背景图像

属性中引用

.svg

图像路径

唯一的解决方案是，正如您所怀疑的那样，只需为悬停状态编码一个全新的SVG：

.field{
宽度：100px；
高度：100px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：#849d8f；
}
.字段搜索{
宽度：35px；
高度：35px；
背景色：rgba（255、255、255、0.2）；
边界半径：66px；
位置：相对位置；
}
.field\u search:：before{
内容：“；
位置：绝对位置；
顶部：8px；
左：8px；
宽度：22px；
高度：22px；
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景位置：0；
不透明度：1；
}
.field_u搜索：hover:：before，
.field_uu搜索：焦点：：之前，
.field\u搜索：活动：：之前{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}

---

谢谢您的回答！