【问题标题】：How to affect the fill color of an SVG if the SVG is base64 encoded as a background?如果 SVG 被 base64 编码为背景，如何影响 SVG 的填充颜色？
【发布时间】：2015-02-28 20:47:37
【问题描述】：

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

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

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

【问题讨论】：

请张贴整个网址。
将 CSS 放入图片 base64 数据本身。

标签： css svg base64

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我发现另一种效果很好的方法是使用 PHP 使用 GET 参数来设置填充颜色。

示例

CSS

.selector {
  background-image: url('svg.php?fill=ff0000');
}

PHP

<?php
    header('Content-type: image/svg+xml');
    $fill = $_GET['fill'];
?>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12">
    <path fill="#<?php echo $fill; ?>" stroke="none" d="M17.93 6.34a3.148 3.148 0 0 1-.2.32l-5.262 5.04a.99.99 0 0 1-1.4 0 .91.91 0 0 1-.3-.68.927.927 0 0 1 .3-.68l3.6-3.42H1.01a.983.983 0 0 1-1-.94.96.96 0 0 1 1-.94h13.622l-3.6-3.42a.914.914 0 0 1-.3-.68.93.93 0 0 1 .3-.68 1.063 1.063 0 0 1 1.4 0l5.262 5.04a.7.7 0 0 1 .2.33.77.77 0 0 1 .036.71z"/>
</svg>

【讨论】：