Html 在用作背景图像时修改SVG填充颜色

将SVG输出直接与页面代码内联，我可以简单地用CSS修改填充颜色，如下所示：

polygon.mystar{
填充：蓝色；
}​
圆圈，我的圆圈{
填充：绿色；
}

这非常有效，但是我正在寻找一种方法来修改SVG作为背景图像时的“填充”属性

html{
背景图像：url（../img/bg.svg）；
}

现在我怎样才能改变颜色？有可能吗

以下是我的外部SVG文件的内容供参考：

---

一种方法是从服务器端机制为svg提供服务。 只需创建一个资源服务器端，根据GET参数输出svg，并在特定url上提供服务

然后在css中使用该url

因为作为背景img，它不是DOM的一部分，您无法对其进行操作。

---

另一种可能是定期使用它，以正常方式将其嵌入页面，但绝对定位，使其达到页面的全宽和全高，然后使用z-index css属性将其置于页面上所有其他DOM元素之后。

将svg作为文本下载

使用javascript修改svg文本以更改绘制/笔划/填充颜色

---

然后将修改后的svg字符串内嵌到css中，如前所述。

现在，您可以在客户端实现以下功能：

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+")";

var green='3CB54A'；
变量red='ED1F24'；
var svg=''；
var encoded=window.btoa（svg）；
document.body.style.background=“url（数据：image/svg+xml；base64，“+encoded+”）；

---

我需要类似的东西，希望坚持使用CSS。下面是LESS和SCSS的混合以及简单的CSS，它们可以帮助您实现这一点。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参见下文

少混入：

.element颜色（@color）{
背景图像：url（'data:image/svg+xml；utf8'）；
}

较少使用：

。元素颜色（#fff）；

---

SCSS混合：

@mixin元素颜色（$color）{
背景图像：url（'data:image/svg+xml；utf8'）；
}

SCSS用途：

@包含元素颜色（#fff）；

---

CSS:

//颜色：红色
背景图像：url（'data:image/svg+xml；utf8'）；

---

---

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

这里的演示晚了，但是，如果您能够直接编辑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>

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

//选择一种颜色
$图标颜色：#F84830；
//用于对svg字符串进行URL编码的函数
@函数str replace（$string，$search，$replace:“”）{
$index:str索引（$string，$search）；
@如果$index{
@返回str切片（$string，1，$index-1）+$replace+strreplace（str切片（$string，$index+str长度（$search）），$search，$replace）；
}
@返回$string；
}
@函数url编码（$string）{
$map:(
"%": "%25",
“”：“%3E”，
" ": "%20",
"!": "%21",
“*”：“%2A”，
"'": "%27",
'"': "%22",
"(": "%28",
")": "%29",
“；”：“%3B”，
“：”：“%3A”，
"@": "%40",
"&": "%26",
“=”：“%3D”，
“+”：“%2B”，
"$": "%24",
“，”：“%2C”，
“/”：“%2F”，
“？”：“%3F”，
"#": "%23",
“[”：“%5B”，
“]：%5D”
);
$new:$string；
@每个$search，$replace在$map中{
$new:str replace（$new，$search，$replace）；
}
@退回$new；
}
@函数内联svg（$string）{
@返回url（'data:image/svg+xml；utf8，#{url encode（$string）}'）；
}
//图标样式
//注意填充=“+$icon color+”“
.图标{
显示：内联块；
宽度：50px；
高度：50px；
背景：内联svg（'
');
}

您可以为此创建自己的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参数

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

---

与其他一些解决方案类似，但这非常干净，可以保持SCSS文件整洁！

另一种方法是使用mask。然后更改masked元素的背景色。这与更改svg的fill属性具有相同的效果

HTML:

---

您可以在这里找到完整的教程：（不是我自己的）。它提出了多种方法（不限于掩码）。

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

$circle图标svg:“”；
$icon color:#f00；
$icon颜色悬停：#00f；
@函数str replace（$string，$search，$replace:“”）{
$index:str索引（$string，$search）；
@如果$index{
@返回str切片（$string，1，$index-1）+$replace+strreplace（str切片（$string，$index+str长度（$search）），$search，$replace）；
}
@返回$string；
}
@函数svg fill（$svg，$color）{
@返回str replace（$svg），许多IFs，但是如果您的预base64编码svg启动：

<svg fill="#000000

如果预编码字符串开始：

<svg fill="#bfa76e

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

PHN2ZyBmaWxsPSIj

base64编码的怪癖是每3个输入字符变为4个输出字符。SVG以这种方式启动时，6个字符的十六进制填充颜色正好从编码块“边界”开始。
因此，您可以轻松地进行跨浏览器JS替换：

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

但上面的tnt rox答案是前进的方向。
在某些（非常具体的）情况下
<svg fill="#bfa76e

PHN2ZyBmaWxsPSIjYmZhNzZl

PHN2ZyBmaWxsPSIj

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

 .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);
}

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.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>

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

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

filter: brightness(0);

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