用作背景图像时如何修改 SVG 图像的填充颜色？答案

【问题标题】：How to modify the fill color of an SVG image when being served as background image?用作背景图像时如何修改 SVG 图像的填充颜色？
【发布时间】：2012-11-02 07:15:35
【问题描述】：

将 SVG 输出直接嵌入到页面代码中，我可以使用 CSS 简单地修改填充颜色，如下所示：

polygon.mystar {
    fill: blue;
}

circle.mycircle {
    fill: green;
}

这很好用，但是我正在寻找一种方法来修改作为背景图像提供的 SVG 的“填充”属性。

html {      
    background-image: url(../img/bg.svg);
}

我现在如何更改颜色？有没有可能？

作为参考，这里是我的外部 SVG 文件的内容：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

【问题讨论】：

我的答案经常被道具击中。您应该考虑将其更改为已接受的答案，以免错过。
您的回答肯定是赢家。真希望我在 9 年前就看过它！
2021 年更新：我认为应该将 Adel's answer 标记为当前的“正确”答案。

标签： html css svg

【解决方案1】：

您可以使用 CSS 掩码，使用“掩码”属性，您可以创建一个应用于元素的掩码。

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

欲了解更多信息，请参阅这篇精彩的文章：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

【讨论】：

这很好，但是当应用于输入字段中的图标时，所有输入文本都被隐藏了。
IE 不支持
2019 年夏季：这个星球上 94% 的浏览器支持“mask-image”或“-webkit-mask-image”样式
这个答案最近越来越受到关注，所以我想我应该指出它不是背景图片。这掩盖了整个元素，包括它的内容。如果我想将一个元素专用于图像，我可以使用带有填充集的普通 SVG。屏蔽在某些情况下很有用，但我不认为它真的可以作为这个特定问题的答案。
@cronoklee - 虽然您在技术上是正确的，但mask-image 实际上可以用于创建“背景图像”。要在不需要屏蔽时在元素 A 上使用此方法，请创建一个与元素 A 具有相同位置和尺寸的元素 B（使用您喜欢的任何方法）并将 mask-image 应用于元素 B。

【解决方案2】：

我需要类似的东西并想坚持使用 CSS。这里有 LESS 和 SCSS mixin 以及可以帮助你的纯 CSS。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参见下文。

少混合：

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

更少的使用：

.element-color(#fff);

SCSS 混合：

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS 用法：

@include element-color(#fff);

CSS：

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Here is more info 将完整的 SVG 代码嵌入到您的 CSS 文件中。它还提到了浏览器兼容性，这对于这是一个可行的选择来说有点太小了。

【讨论】：

请注意，您必须对十六进制颜色的 # 字符进行 urlencode 才能使其在 Firefox 中工作。所以像<svg fill="#ffffff" ...></svg> 这样的东西变成了<svg fill="%23ffffff" ...></svg>。
甜蜜的方法。您是否必须像这样将 svg 硬编码到背景图像中？你不能以某种方式链接到它吗？
这种方法的问题是你错过了浏览器缓存。
我发现这个网站可以为您提供完美编码的 URL 以供使用：yoksel.github.io/url-encoder - 只需将 SVG 代码复制到其中并复制返回的 CSS :-)
我走了这条路，只是为了意识到它被任何具有良好安全听众的反向代理阻止在生产中，如下所述：stackoverflow.com/a/62213224/5506400。这很容易受到 XSS 攻击。

【解决方案3】：

一种方法是通过某种服务器端机制为您的 svg 提供服务。只需创建一个资源服务器端，根据 GET 参数输出您的 svg，然后在某个 url 上提供它。

然后你只需在你的 css 中使用那个 url。

因为作为背景图像，它不是 DOM 的一部分，您无法对其进行操作。另一种可能性是定期使用它，以正常方式将其嵌入页面中，但绝对定位，使其全宽和页面高度，然后使用 z-index css 属性将其放在所有其他 DOM 元素后面在页面上。

【讨论】：

不要忘记您是否从服务器端脚本提供 SVG，以确保您还发送了正确的 MIME header。在 PHP 中，这将是：<?php header('Content-type: image/svg+xml'); ?>
您可以使用 svg 图像作为遮罩并操作元素的背景颜色。这将与更改填充具有相同的效果。（提供详细答案）
这个答案在 2012 年非常好，但现在所有浏览器都支持 CSS 掩码和/或过滤器已有一段时间了。我建议任何阅读本文的人现在查看下面widged 答案中的链接，或者直接跳到CSS Masks here，这是一个非常简单的解决方案——请注意目前仍然是requires 2 version of the rule, one with -webkit- prefix。对于 Microsoft Edge，目前支持 CSS 过滤器，但尚不支持遮罩。
现在有很多解决方案可以使用，我同意这个答案不再反映当前的可能性状态。
此解决方案的另一个问题是，对于您需要的每种颜色，您将再发出一个 HTTP 请求，而不是获取一次并使用 filter 或 mask-image 进行样式设置。

【解决方案4】：

还有一种方法是使用掩码。然后更改被屏蔽元素的背景颜色。这与更改 svg 的填充属性具有相同的效果。

HTML：

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS：

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

您可以在这里找到完整的教程：http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images（不是我自己的）。它提出了多种方法（不限于掩码）。

【讨论】：

有一点需要注意的是浏览器支持。我相信 IE（像往常一样）在这方面落后了。
不幸的是，mask 既不受 IE 也不受 Edge 支持：caniuse.com/#search=mask
在 Chrome 中也不适合我。编辑：哦 nvm ......我没有启用自动前缀。我认为供应商应该停止使用前缀？！
适用于最新的 chrome 和 firefox
@alpipego 更新！ Edge added support 为 mask-image 在 2017 年末。

【解决方案5】：

使用棕褐色滤镜以及色调旋转、亮度和饱和度来创建我们想要的任何颜色。

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

【讨论】：

使用这个 CSS 过滤器生成器：codepen.io/sosuke/pen/Pjoqqp
是的，这应该是答案。按照上面 @djibe 的 css 过滤器生成器说明进行操作。
这没有回答问题。如果他想用不同的颜色填充不同的路径怎么办？
这对我非常有帮助，还有@djibe 的评论
这太棒了！我知道过滤器棕褐色/色调旋转技巧，但没想到要寻找发电机！ \o/

【解决方案6】：

使用 Sass 是可能的！您唯一需要做的就是对您的 svg 代码进行 url 编码。这可以通过 Sass 中的辅助函数来实现。我为此做了一个codepen。看看这个：

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

【讨论】：

这很好用。唯一的问题：在 IE10 中，图标太小（我认为是给定大小的 10%。

【解决方案7】：

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

codeben article and demo

【讨论】：

此方法将过滤器应用于整个对象，包括子对象。

【解决方案8】：

将您的 svg 下载为文本。

使用 javascript 修改您的 svg 文本以更改绘画/描边/填充颜色[s]。

然后按照here 的描述将修改后的 svg 字符串内嵌到您的 css 中。

【讨论】：

【解决方案9】：

现在您可以像这样在客户端实现这一点：

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Fiddle here!

【讨论】：

你应该避免对 SVG 使用 Base64，因为它是不必要的，会使你的文件更大，甚至阻止 GZIP 有效地压缩这些代码块。
这种编码发生在客户端，可能只是为了彻底转义...
不用说你可以用 JS 做任何事情。重点是避免JS。

【解决方案10】：

您可以将 SVG 存储在变量中。然后根据您的需要操作 SVG 字符串（即设置宽度、高度、颜色等）。然后使用结果设置背景，例如

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

我也做了演示，http://sassmeister.com/gist/4cf0265c5d0143a9e734。

这段代码对 SVG 做了一些假设，例如<svg /> 元素没有现有的填充颜色，并且没有设置宽度或高度属性。由于输入在 SCSS 文档中是硬编码的，因此很容易强制执行这些约束。

不用担心代码重复。 gzip 压缩使差异可以忽略不计。

【讨论】：

重复代码是一种代码气味，因此建议人们在您的示例中不要担心重复代码不是一个好主意，但是这说明我看不到您的代码在哪里重复？我认为如果您完全删除评论会更好读。

【解决方案11】：

如果你想像这样在url() 上直接在 CSS 上使用 SVG；

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

你应该将#编码为%23，否则将不起作用。

<svg fill="%23FFF" ...

【讨论】：

【解决方案12】：

您可以为此创建自己的 SCSS 函数。将以下内容添加到您的 config.rb 文件中。

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

然后你可以在你的 CSS 中使用它：

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

您需要编辑 SVG 文件并将标记中的任何填充属性替换为 fill="{color}"

图标路径始终与同一 config.rb 文件中的 images_dir 参数相关。

与其他一些解决方案类似，但它非常干净并且可以让您的 SCSS 文件保持整洁！

【讨论】：

这是来自github-issue。只是在这里引用它以防有人想阅读那里的讨论

【解决方案13】：

在某些（非常具体的）情况下，这可以通过使用filter 来实现。例如，您可以通过使用filter: hue-rotate(45deg); 将色调旋转 45 度将蓝色 SVG 图像更改为紫色。浏览器支持很少，但它仍然是一项有趣的技术。

Demo

【讨论】：

【解决方案14】：

对于单色背景，您可以使用带有蒙版的 svg，其中应显示背景颜色

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

比使用这个 css

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

【讨论】：

【解决方案15】：

这里的节目很晚，但是，如果您能够直接编辑 SVG 代码，我能够为 SVG 多边形添加填充颜色，例如，以下 svg 呈现红色，而不是默认的黑色。不过，我还没有在 Chrome 之外进行过测试：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

【讨论】：

【解决方案16】：

我找到的唯一方法是跨浏览器（又名防弹），是用 PHP 渲染 SVG 并传递查询字符串来设置颜色。

SVG，这里称为“arrow.php”

<?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace("/[^a-z0-9]/", '', $fill);
if(empty($fill)) $fill = "000000";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" width="7.4" height="12" viewBox="0 0 7.4 12">
    <g>
        <path d="M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z" transform="translate(-8.6 -6)" fill="#<?php echo htmlspecialchars($fill); ?>" fill-rule="evenodd"/>
    </g>
</svg>

那你就这样调用图片

.cssclass{ background-image: url(arrow.php?fill=112233); }

仅适用于 PHP。请记住，每次更改颜色值时，您的浏览器都会加载一个新图像。

【讨论】：

【解决方案17】：

您可以使用亮度滤镜，任何大于 1 的值都会使元素更亮，任何小于 1 的值都会使其更暗。所以，我们可以让那些浅色的 SVG 变暗，反之亦然，例如，这会使 svg 变暗：

filter: brightness(0);

为了改变颜色而不仅仅是亮度级别，我们可以使用棕褐色滤镜以及色调旋转、亮度，例如：

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

【讨论】：

【解决方案18】：

scss 创建函数

@function url-svg($icon) {
  @return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}

scss 使用

url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')

css生成

url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')

str-replace 函数从 bootstrap 中使用。

【讨论】：

【解决方案19】：

这是我最喜欢的方法，但您的浏览器支持必须非常先进。使用 mask 属性，您可以创建一个应用于元素的掩码。遮罩在任何地方都是不透明的或实心的，下面的图像会透出来。在透明的地方，底层图像被遮盖或隐藏。 CSS mask-image 的语法类似于 background-image。look at the codepenmask

【讨论】：

【解决方案20】：

很多 IF，但如果您的预 base64 编码的 SVG 开始：

<svg fill="#000000

那么base64编码的字符串就会开始：

PHN2ZyBmaWxsPSIjMDAwMDAw

如果预编码的字符串开始：

<svg fill="#bfa76e

然后编码为：

PHN2ZyBmaWxsPSIjYmZhNzZl

两个编码字符串开头相同：

PHN2ZyBmaWxsPSIj

base64 编码的怪癖是每 3 个输入字符变成 4 个输出字符。 SVG 像这样开始，然后 6 个字符的十六进制填充颜色正好在编码块“边界”上开始。因此，您可以轻松地进行跨浏览器的 JS 替换：

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

但上面的 tnt-rox 答案是前进的方向。

【讨论】：

公众似乎不喜欢 base64 的使用
手工编写这很可笑，但这是一个很棒的小 lib 想法。基本上，base64 只编码 svg 的一部分，并根据需要进行交换。（在我的解决方案中，我也在做同样的事情，但是通过组件，在预渲染 vue 时几乎是免费的，所以这里不需要 base64）
@revelt - 这是 2016 年编写的，SVG 数据 uris 必须是 base 64 编码。幸运的是，地段发生了变化