实施例

Question

我选择将我的SVG base64编码为CSS背景，以加快加载速度，但我不能用CSS更改填充颜色。通过以下示例，我尝试添加背景颜色，但这只是更改div的颜色。如果我在fill: #06f;下面添加background:则无效。

.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。

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

Answer 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>

如果SVG以base64编码为背景，如何影响SVG的填充颜色？

2 个答案:

实施例