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

Question

I have the SVG background-image in ::before element: https://codepen.io/sshiling/pen/PVWgdW
I want to change it's color on hover, focus, active. I try to use this method:
:hover::before path { fill: #000; }
But it doesn't work

I can just duplicate my inline SVG and change it's color manually, but maybe there is a way to change it with "path fill" or something like this.

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

The problem is that you are using SVG's data URI as a background image, meaning that its properties and styles cannot be modified—the SVG markup is not part of the DOM and therefore untouchable with CSS. It is akin to referencing a .svg image path in your background-image property.

The only solution is—as you have suspected—to simply encode a brand new SVG for the hover state:

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

Another solution will require changes to your markup, where you actually embed the SVG in an image map, and utilise the <use> element to reference the symbol. However, this means that you will be injected unnecessary empty elements in your markup for the sake of stylistic/visual purposes, a practise that may be frowned upon by some:

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