当我将鼠标悬停在它上面时，我的 SVG 按钮没有改变颜色

Question

我有一个按钮，里面有一个 SVG，在我的 CSS 中，当您将鼠标悬停在它上面时，图标会改变颜色，这与 SVG 相同。但是我必须将鼠标直接放在 SVG 上才能填充颜色，我是 SVG 的新手，所以如果有人可以帮助我提供屏幕截图和我使用的代码。

.icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

svg:hover {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}

<button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

Answer 1

因此您将鼠标悬停在父项上但想要更改子项的属性。因此，您可以将悬停效果设置为父项，然后将更改写入子项。

像这样：

.icon:hover svg{
  fill: white;
}

.icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187, 187, 187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172, 170, 170, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

.icon:hover svg {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}

<button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,0,72.564c20.039,20.039,52.527,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,35.483,122.853,35.483c127.318,0,230.9-103.582,230.9-230.9S408.42,0,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,281.1,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

Answer 2

使用 https://yqnn.github.io/svg-path-editor/

的简化路径

button{
 width:4em;
}
button,
svg{
  display:inline-block;
  vertical-align:middle;
}
button:hover{
  background:green;
  stroke:black;
  stroke-width:5;
  fill:gold;
}

<button>
   <svg viewBox="0 0 131 131"  width='100%'>
        <path d="M72 0c-33 0-59 27-59 59c0 12 3 22 9 31l-18 18c-5 5-5 14 0 19c5 5 14
                 5 19 0l18-18c9 6 20 9 31 9c33 0 59-27 59-59s-27-59-59-59zm0 105c-25
                 0-46-21-46-46s21-46 46-46s46 21 46 46s-21 46-46 46z"/>
  </svg>
</button>

当我将鼠标悬停在它上面时，我的 SVG 按钮没有改变颜色

My SVG button is not changing colors when i hover over it

html

css

svg

button

hover