IE的CSS蒙版图像替代，用于创建可编辑的SVG背景颜色

Question

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

我可以使用掩码图像 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 元素上使用该字体。然后，您可以更改颜色属性。