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

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

将SVG输出与页面代码直接插入，我可以简单地用CSS修改填充颜色:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.

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

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

How can I change the colors now? Is it even possible?

我怎么能改变颜色呢?它甚至有可能吗?

For reference, here are the contents of my external SVG file:

这里是我的外部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>

14 个解决方案

#1

I think the only way for you to do this is to serve your svg from some server side mechanism. Simply create a resource server side that outputs your svg according to GET parameters, and you serve it on a certain url.

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

Then you just use that url in your css.

然后在css中使用这个url。

Because as a background img, it isn't part of the DOM and you can't manipulate it. Another possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.

因为作为一个后台img，它不是DOM的一部分，你无法操作它。另一种可能是经常使用它，将其嵌入到一个正常的页面中，但是绝对地，使它的宽度和高度达到一个页面的高度，然后使用z-index css属性将它放在页面上所有其他DOM元素的后面。

#2

I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.

我需要类似的东西，并想坚持CSS。这里有更少的SCSS混合以及简单的CSS，可以帮助您实现这一点。不幸的是，它的浏览器支持有点松懈。有关浏览器支持的详细信息，请参见下面。

LESS mixin:

更少的混合:

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

LESS usage:

更少的使用方法:

.element-color(#fff);

---

SCSS mixin:

SCSS混合:

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

SCSS usage:

SCSS用法:

@include element-color(#fff);

---

CSS:

CSS:

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

---

Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.

这里有更多关于将完整的SVG代码嵌入到CSS文件中的信息。它还提到了浏览器的兼容性，这对于一个可行的选择来说是太小了一点。

#3

Yet another approach is to use mask. You then change the background color of the masked element. This has the same effect as changing the fill attribute of the svg.

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

HTML:

HTML:

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

CSS:

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

You will find a full tutorial here: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (not my own). It proposes a variety of approaches (not limited to mask).

您将在这里找到完整的教程:http://codepen。io / noahblon /博客/ coloring-svgs-in-css-background-images(不是我的)。它提出了各种方法(不仅限于屏蔽)。

#4

You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element.

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

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

For more see this great article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

更多信息请参见本文:https://codepen.io/noahblon/post/coloring-svgs-in css-background-images

#5

It's possible with Sass! The only thing you have to do is to url-encode your svg code. And this is possible with a helper function in Sass. I've made a codepen for this. Look at this:

有可能与萨斯!您只需对svg代码进行url编码。在Sass中有一个辅助函数。我为此做了一个代码页。看看这个:

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

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

#6

Download your svg as text.

下载svg作为文本。

Modify your svg text using javascript to change the paint/stroke/fill color[s].

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

Then embed the modified svg string inline into your css as described here.

然后将修改后的svg字符串内联地嵌入到css中。

#7

Now you can achieve this on the client side like this:

现在你可以在客户端实现这个:

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!

小提琴!

#8

You can store the SVG in a variable. Then manipulate the SVG string depending on your needs (i.e., set width, height, color, etc). Then use the result to set the background, e.g.

您可以将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)}');
  }
}

I have made a demo too, http://sassmeister.com/gist/4cf0265c5d0143a9e734.

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

This code makes a few assumptions about the SVG, e.g. that <svg /> element does not have an existing fill colour and that neither width or height properties are set. Since the input is hardcoded in the SCSS document, it is quite easy to enforce these constraints.

这段代码对SVG做了一些假设，例如，< SVG />元素没有现有的填充颜色，也没有设置宽度或高度属性。

Do not worry about the code duplication. gzip compression makes the difference negligible.

不要担心代码重复。gzip压缩可以忽略不计。

#9

You can create your own SCSS function for this. Adding the following to your config.rb file.

您可以为此创建自己的SCSS函数。在配置中添加以下内容。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

Then you can use it in your CSS:

然后你可以在CSS中使用它:

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

You will need to edit your SVG files and replace any fill attributes in the markup with fill="{color}"

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

The icon path is always relative to your images_dir parameter in the same config.rb file.

图标路径总是相对于您的images_dir参数在相同的配置。rb文件。

Similar to some of the other solutions, but this is pretty clean and keeps your SCSS files tidy!

类似于其他一些解决方案，但这是非常干净的，并且保持您的SCSS文件整洁!

#10

 .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

codeben文章和演示

#11

Late to the show here, BUT, I was able to add a fill color to the SVG polygon, if you're able to directly edit the SVG code, so for example the following svg renders red, instead of default black. I have not tested outside of Chrome though:

但是，如果您能够直接编辑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>

#12

In some (very specific) situations this might be achieved by using a filter. For example, you can change a blue SVG image to purple by rotating the hue 45 degrees using filter: hue-rotate(45deg);. Browser support is minimal but it's still an interesting technique.

在某些(非常特定的)情况下，这可以通过使用过滤器实现。例如，您可以使用filter: hue-rotate(45deg)将蓝色SVG图像转换为紫色。浏览器支持是最小的，但它仍然是一个有趣的技术。

Demo

演示

#13

A lot of IFs, but if your pre base64 encoded SVG starts:

很多IFs，但是如果您的预base64编码的SVG开始:

<svg fill="#000000

Then the base64 encoded string will start:

然后base64编码字符串将开始:

PHN2ZyBmaWxsPSIjMDAwMDAw

if the pre-encoded string starts:

如果预编码字符串开始:

<svg fill="#bfa76e

then this encodes to:

那么这个编码:

PHN2ZyBmaWxsPSIjYmZhNzZl

Both encoded strings start the same:

两个编码的字符串开始相同:

PHN2ZyBmaWxsPSIj

The quirk of base64 encoding is every 3 input characters become 4 output characters. With the SVG starting like this then the 6-character hex fill color starts exactly on an encoding block 'boundary'. Therefore you can easily do a cross-browser JS replace:

base64编码的特点是每3个输入字符变成4个输出字符。从SVG开始，6个字符的十六进制填充颜色从编码块“边界”开始。因此你可以很容易地做一个跨浏览器的JS替换:

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

But tnt-rox answer above is the way to go moving forward.

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

#14

This is my favorite method, but your browser support must be very progressive. With the mask property you create a mask that is applied to an element. Everywhere the mask is opaque, or solid, the underlying image shows through. Where it’s transparent, the underlying image is masked out, or hidden. The syntax for a CSS mask-image is similar to background-image.look at the codepenmask

这是我最喜欢的方法，但是您的浏览器支持必须非常先进。使用mask属性，创建应用于元素的掩码。在任何地方，蒙版都是不透明的，或者是固体的，下面的图像就会显示出来。在透明的地方，底层的图像被隐藏起来。CSS掩模图像的语法类似于背景图像。看看codepenmask