在带有蒙版或背景 SVG 图标的元素上添加悬停效果

Question

如何在用作 SVG 图标的元素上添加悬停效果，该图标也可以更改图标本身的颜色。

这就是我现在所拥有的，两个选项，使用蒙版图像或将图标显示为背景。

在 CSS 中使用background 的问题，悬停时显示正确，但我无法更改图标颜色。

.icon {
    display: inline-block;
    background: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') no-repeat center; /* imagine the file here as an SVG file */
    background-size: 100px 100px !important;
    height: 100px;
    width: 100px;
}

.icon_interactive:hover {
    cursor: pointer;
    background-color: white;
    border-radius: 50%;
    padding: 25px;
}

<div style="padding: 100px; background-color: gray; text-align: center;">
  <span class="icon icon_interactive"></span>
</div>

在 CSS 中使用mask-image 的问题，悬停时显示不正确，但我可以更改图标颜色。

.icon {
    -webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
    -webkit-mask-size: cover !important;
    mask-image: url('https://cdn-icons-png.flaticon.com/512/151/151773.png');
    mask-size: cover !important;
    display: inline-block;
    background-color: black;
    height: 100px;
    width: 100px;
}

.icon_interactive:hover {
    cursor: pointer;
    background-color: white;
    border-radius: 50%;
    padding: 25px;
}

<div style="padding: 100px; background-color: gray; text-align: center;">
  <span class="icon icon_interactive"></span>
</div>

我想要创建的是悬停时的交互式图标，您可以更改图标本身的颜色。

编辑： 总结一下我的问题，我有一个作为图标的蒙版元素，当悬停该元素时，我需要让它具有可控的颜色、大小和背景圆圈。

Answer 1

考虑使用伪元素来结合这两种技巧：

.icon {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  padding: 25px;
}

.icon:before {
  content: "";
  display: block;
  height:100%;
  background: #000;
  -webkit-mask: url('https://cdn-icons-png.flaticon.com/512/151/151773.png') center/100px 100px no-repeat;
}

.icon_interactive:hover {
  cursor: pointer;
  background-color: white;
}
.icon_interactive:hover::before {
  background:red;
}

body {
  background:gray;
}

<span class="icon icon_interactive"></span>