css mask-image替代ie，用于创建可编辑的svg背景颜色

Question

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

我可以使用 mask-image css属性

创建这个非常简单的东西

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

但这种方法不适用于ie（任何版本） https://developer.mozilla.org/tr/docs/Web/CSS/mask-image

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

有没有办法像这样使用svg？

Ps：我知道我可以在html中添加它作为img元素，有点js可以处理这个img来编辑svg颜色，但我想用它作为背景图像。

Answer 1

您可以将svg转换为字体，然后使用.icon元素上的字体。 然后你可以改变颜色属性。