Html ie创建可编辑svg背景色的css掩码图像替代方案

我想使用svg作为文件，并在css中使用它，我必须在悬停它时更改它的颜色

我可以使用mask imagecss属性创建这个非常简单的页面

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

但是这种方法在ie（任何版本）中都不起作用

我不想使用svg作为代码，它看起来不太好

有没有办法像这样使用svg

---

Ps：我知道我可以将其添加为html中的img元素，一点js可以处理此img以编辑svg颜色，但我想将其用作背景图像。

您可以将svg转换为字体，然后使用.icon元素上的字体。

---

然后您可以只更改颜色属性。

在悬停时有两个图像并从一个图像更改为另一个。或者在一个SVG（即SVG精灵表）中有两种颜色并在悬停时更改背景位置。。这种方法听起来不错。非常感谢。