css - 如果 SVG 使用 base64 编码作为背景，如何影响 SVG 的填充颜色？

Question

我已选择将我的 SVG 进行 base64 编码作为 CSS 背景以加快加载时间，但我无法使用 CSS 更改填充颜色。在下面的示例中，我尝试添加背景颜色，但这只会改变 div 的颜色。如果我在 background: 下面添加 fill: #06f; 它什么都不做。

.icon {
    background: url(data:image/svg+xml;base64,PHN2Z...3N2Zz4K) no-repeat center center; 
}

如何单独使用 CSS 来影响填充颜色？

Answer 1

无法使用 CSS 更改 SVG 背景的填充(或任何其他属性)。 https://stackoverflow.com/a/13367916/1620112建议使用服务器端生成的 SVG。

您也可以使用客户端解决方案(正如 Robert 在上面所建议的那样)。可以在此处找到一个非常简单的示例 https://stackoverflow.com/a/25305148/1620112或这里 https://stackoverflow.com/a/25357798/1620112