blocks|key|437958|text|要做到这一点，一种方法是通过某种服务器端机制为svg提供服务。只需创建一个资源服务器端，根据GET参数输出您的svg，然后在某个url上为其提供服务。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437959|然后你只需要在你的css中使用这个url。|437960|因为作为背景img，它不是DOM的一部分，您不能操作它。另一种可能是定期使用它，以常规方式将其嵌入到页面中，但绝对定位它，使其达到页面的整个宽度和高度，然后使用z-index+css属性将其放在页面上所有其他DOM元素的后面。|437961|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>One way 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.</p>

<p>Then you just use that url in your css.</p>

<p>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 &amp; height of a page and then use z-index css property to put it behind all the other DOM elements on a page.</p>


blocks|key|437988|text|以文本形式下载您的svg。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|437989|使用javascript修改svg文本以更改绘制/笔划/填充颜色。|437990|然后将修改后的svg字符串嵌入到您的css中，如here所述。|offset|length|437991|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/10768631/62255^0|0|0|O|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>Download your svg as text.</p>

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

<p>Then embed the modified svg string inline into your css as described <a href="https://stackoverflow.com/a/10768631/62255">here</a>.</p>


blocks|key|219896|text|现在您可以在客户端实现这一点，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219897|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="#'%2Bgreen%2B'"+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="#'%2Bred%2B'"+cx="202.028"+cy="58.342"+r="12.26"/></svg>';++++++
var+encoded+=+window.btoa(svg);
document.body.style.background+=+"url(data:image/svg%2Bxml;base64,"%2Bencoded%2B")";|code-block|syntax|javascript|219898|Fiddle+here!|offset|length|219899|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/k0cx2b04/2/^0|0|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Now you can achieve this on the client side like this:</p>

<pre><code>var green = '3CB54A';
var red = 'ED1F24';
var svg = '&lt;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"&gt; &lt;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 "/&gt;&lt;circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/&gt;&lt;/svg&gt;';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";
</code></pre>

<p><a href="http://jsfiddle.net/k0cx2b04/2/" rel="noreferrer">Fiddle here!</a></p>


blocks|key|438050|text|在这里，如果您能够直接编辑SVG代码，那么我可以向SVG多边形添加填充颜色，例如，下面的svg呈现红色，而不是默认的黑色。我还没有在Chrome之外测试过：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438051|<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>|code-block|syntax|javascript|438052|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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:</p>

<pre><code>&lt;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"&gt;
    &lt;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 "/&gt;
&lt;/svg&gt;
</code></pre>


blocks|key|219962|text|有了Sass，这是可能的！你唯一需要做的就是对你的svg代码进行url编码。这可以通过Sass中的helper函数来实现。我已经为这个做了一个codepen。看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|219963|http://codepen.io/philippkuehn/pen/zGEjxB|offset|length|219964|//+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)+%2B+$replace+%2B+str-replace(str-slice($string,+$index+%2B+str-length($search)),+$search,+$replace);
++}
++@return+$string;
}

@function+url-encode($string)+{
++$map:+(
++++"%25":+"%2525",
++++"<":+"%253C",
++++">":+"%253E",
++++"+":+"%2520",
++++"!":+"%2521",
++++"*":+"%252A",
++++"'":+"%2527",
++++'"':+"%2522",
++++"(":+"%2528",
++++")":+"%2529",
++++";":+"%253B",
++++":":+"%253A",
++++"@":+"%2540",
++++"&":+"%2526",
++++"=":+"%253D",
++++"%2B":+"%252B",
++++"$":+"%2524",
++++",":+"%252C",
++++"/":+"%252F",
++++"?":+"%253F",
++++"#":+"%2523",
++++"[":+"%255B",
++++"]":+"%255D"
++);
++$new:+$string;
++@each+$search,+$replace+in+$map+{
++++$new:+str-replace($new,+$search,+$replace);
++}
++@return+$new;
}

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


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

.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="'+%2B+$icon-color+%2B+'"+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>');
}|code-block|syntax|javascript|219965|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|15|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>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:</p>

<p><a href="http://codepen.io/philippkuehn/pen/zGEjxB" rel="noreferrer">http://codepen.io/philippkuehn/pen/zGEjxB</a></p>

<pre><code>// 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",
    "&lt;": "%3C",
    "&gt;": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&amp;": "%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('&lt;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"&gt;
&lt;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"/&gt;
&lt;/svg&gt;');
}
</code></pre>


blocks|key|220012|text|您可以为此创建自己的SCSS函数。将以下内容添加到config.rb文件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220013|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('%2B',+'%2520')
++++data_url+=+"url('data:image/svg%2Bxml;charset=utf-8,"+%2B+encoded_svg+%2B+"')"
++++Sass::Script::String.new(data_url)
++end

private

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

end|code-block|syntax|javascript|220014|然后你可以在你的CSS中使用它：|220015|.icon+{
++background-image:+inline-svg-image('icons/icon.svg',+'#555');
}|220016|您需要编辑SVG文件，并将标记中的所有填充属性替换为颜色“{fill=}”|220017|图标路径始终相对于同一config.rb文件中的images_dir参数。|220018|类似于其他一些解决方案，但这是相当干净的，并保持您的SCSS文件整洁！|220019|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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

<pre><code>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
</code></pre>

<p>Then you can use it in your CSS:</p>

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

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

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

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


blocks|key|438177|text|另一种方法是使用掩码。然后更改被遮罩元素的背景色。这与更改svg的fill属性具有相同的效果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438178|HTML：|438179|<glyph+class="star"/>
<glyph+class="heart"+/>
<glyph+class="heart"+style="background-color:+green"/>
<glyph+class="heart"+style="background-color:+blue"/>|code-block|syntax|javascript|438180|CSS：|438181|glyph+{
++++display:+inline-block;
++++width:++24px;
++++height:+24px;
}

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

glyph.heart+{
++-webkit-mask:+url(heart.svg)+no-repeat+100%25+100%25;
++mask:+url(heart.svg)+no-repeat+100%25+100%25;
++-webkit-mask-size:+cover;
++mask-size:+cover;
++background-color:+red;
}|438182|你可以在这里找到完整的教程：http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images+(不是我自己的)。它提出了各种方法(不限于掩码)。|offset|length|438183|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images^0|0|0|0|0|0|E|1Y|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>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. </p>

<p>HTML:</p>

<pre><code>&lt;glyph class="star"/&gt;
&lt;glyph class="heart" /&gt;
&lt;glyph class="heart" style="background-color: green"/&gt;
&lt;glyph class="heart" style="background-color: blue"/&gt;
</code></pre>

<p>CSS:</p>

<pre><code>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;
}
</code></pre>

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


blocks|key|220062|text|您可以将SVG存储在变量中。然后根据您的需要操作SVG字符串(例如，设置宽度、高度、颜色等)。然后使用结果来设置背景，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220063|$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)+%2B+$replace+%2B+str-replace(str-slice($string,+$index+%2B+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%2Bxml;utf8,#{svg-fill($icon-svg,+$icon-color)}');

++&:hover+{
++++background:+url('data:image/svg%2Bxml;utf8,#{svg-fill($icon-svg,+$icon-color-hover)}');
++}
}|code-block|syntax|javascript|220064|我也做了一个演示，http://sassmeister.com/gist/4cf0265c5d0143a9e734。|offset|length|220065|这段代码对SVG做了一些假设，例如<svg+/>元素没有现有的填充颜色，宽度和高度属性都没有设置。由于输入是在SCSS文档中硬编码的，因此很容易实施这些约束。|style|CODE|220066|不要担心代码重复。gzip压缩使得差异可以忽略不计。|220067|entityMap|0|LINK|mutability|MUTABLE|url|http://sassmeister.com/gist/4cf0265c5d0143a9e734|1|/questions/tagged/gzip^0|0|0|9|1C|0|0|H|7|0|9|4|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|6|7|16|8|@$I|17|J|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$I|1A|J|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]



<p>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.</p>

<pre class="lang-scss prettyprint-override"><code>$circle-icon-svg: '&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;&lt;circle cx="10" cy="10" r="10" /&gt;&lt;/svg&gt;';

$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, '&lt;svg', '&lt;svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '&lt;svg', '&lt;svg width="#{$width}"');
  $svg: str-replace($svg, '&lt;svg', '&lt;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)}');

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

<p>I have made a demo too, <a href="http://sassmeister.com/gist/4cf0265c5d0143a9e734" rel="noreferrer">http://sassmeister.com/gist/4cf0265c5d0143a9e734</a>.</p>

<p>This code makes a few assumptions about the SVG, e.g. that <code>&lt;svg /&gt;</code> 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.</p>

<p>Do not worry about the code duplication. <a href="/questions/tagged/gzip" class="post-tag" title="show questions tagged &#39;gzip&#39;" rel="tag">gzip</a> compression makes the difference negligible.</p>


blocks|key|438237|text|很多的if，但是如果你的base64编码的SVG开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438238|<svg+fill="#000000|code-block|syntax|javascript|438239|然后，base64编码的字符串将开始：|438240|PHN2ZyBmaWxsPSIjMDAwMDAw|438241|如果预编码字符串开始：|438242|<svg+fill="#bfa76e|438243|然后将其编码为：|438244|PHN2ZyBmaWxsPSIjYmZhNzZl|438245|两个编码字符串的开头相同：|438246|PHN2ZyBmaWxsPSIj|438247|base64编码的怪癖是每3个输入字符变成4个输出字符。SVG像这样开始，然后6个字符的十六进制填充颜色恰好在一个编码块“边界”上开始。因此，您可以轻松地进行跨浏览器的JS替换：|438248|output+=+input.replace(/MDAwMDAw/,+"YmZhNzZl");|438249|但tnt-rox上面的答案才是前进的方向。|438250|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

<p>A lot of IFs, but if your pre base64 encoded SVG starts:</p>

<pre><code>&lt;svg fill="#000000
</code></pre>

<p>Then the base64 encoded string will start:</p>

<pre><code>PHN2ZyBmaWxsPSIjMDAwMDAw
</code></pre>

<p>if the pre-encoded string starts:</p>

<pre><code>&lt;svg fill="#bfa76e
</code></pre>

<p>then this encodes to:</p>

<pre><code>PHN2ZyBmaWxsPSIjYmZhNzZl
</code></pre>

<p>Both encoded strings start the same:</p>

<pre><code>PHN2ZyBmaWxsPSIj
</code></pre>

<p>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:</p>

<pre><code>output = input.replace(/MDAwMDAw/, "YmZhNzZl");
</code></pre>

<p>But tnt-rox answer above is the way to go moving forward.</p>


blocks|key|438252|text|在某些(非常具体的)情况下，这可以通过使用filter来实现。例如，通过使用filter:+hue-rotate(45deg);将色调旋转45度，可以将蓝色SVG图像更改为紫色。浏览器支持很少，但它仍然是一种有趣的技术。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|438253|Demo|438254|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Web/CSS/filter|1|https://jsfiddle.net/michaelvandeweerd/g7tnbxvz/1/^0|12|Q|L|6|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

<p>In some (very specific) situations this might be achieved by using a <a href="https://developer.mozilla.org/en/docs/Web/CSS/filter" rel="nofollow">filter</a>. For example, you can change a blue SVG image to purple by rotating the hue 45 degrees using <code>filter: hue-rotate(45deg);</code>. Browser support is minimal but it's still an interesting technique.</p>

<p><a href="https://jsfiddle.net/michaelvandeweerd/g7tnbxvz/1/" rel="nofollow">Demo</a></p>


blocks|key|438260|text|这是我最喜欢的方法，但您的浏览器支持必须非常先进。使用mask属性可以创建应用于元素的掩码。无论遮罩是不透明的还是实心的，底层图像都会显示出来。在透明的地方，底层图像被遮蔽或隐藏。CSS+mask-image语法类似于background-image.look+at+the+codepenmask|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|438261|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/noahblon/pen/wzsyC^0|41|4|3I|J|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>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.<a href="http://codepen.io/noahblon/pen/wzsyC" rel="nofollow noreferrer">look at the codepen</a><code>mask</code></p>


blocks|key|438263|text|+.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%25+50%25;+
++background-size:+cover;
}

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

.icon-yellow+{
++-webkit-filter:+hue-rotate(70deg)+saturate(100);
++filter:+hue-rotate(70deg)+saturate(100);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|438264|codeben+article+and+demo|unstyled|offset|length|438265|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images^0|0|0|O|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

<p><a href="http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images" rel="noreferrer">codeben article and demo</a></p>


blocks|key|220117|text|您可以使用CSS掩码，通过'+mask‘属性，您可以创建一个应用于元素的掩码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220118|.icon+{
++++background-color:+red;
++++-webkit-mask-image:+url(icon.svg);
++++mask-image:+url(icon.svg);
}|code-block|syntax|javascript|220119|有关更多信息，请参阅这篇很棒的文章：https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images|offset|length|220120|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images^0|0|0|I|1Z|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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

<pre><code>.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}
</code></pre>

<p>For more see this great article: <a href="https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images" rel="noreferrer">https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images</a></p>


blocks|key|220135|text|对于单色背景，您可以使用带有蒙版的svg，其中应显示背景颜色|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220136|<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%25;+height:+100%25;"+>
++++<defs>
++++++++<mask+id="Mask">
++++++++++++<rect+width="100%25"+height="100%25"+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>|code-block|syntax|javascript|220137|然后使用这个css|220138|background-repeat:+no-repeat;
background-position:+center+center;
background-size:+contain;
background-image:+url(your/path/to.svg);
background-color:+var(--color);|220139|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>for monochrome background you could use a svg with a mask, where the background color should be displayed</p>

<pre><code>&lt;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%;" &gt;
    &lt;defs&gt;
        &lt;mask id="Mask"&gt;
            &lt;rect width="100%" height="100%" fill="#fff" /&gt;
            &lt;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"&gt;&lt;/polyline&gt;
        &lt;/mask&gt;
    &lt;/defs&gt;
    &lt;rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" /&gt;
&lt;/svg&gt;
</code></pre>

<p>and than use this css </p>

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


blocks|key|220189|text|使用深褐色滤镜和色调旋转，亮度和饱和度来创建我们想要的任何颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220190|.colorize-pink+{
++filter:+brightness(0.5)+sepia(1)+hue-rotate(-70deg)+saturate(5);
}|code-block|syntax|javascript|220191|https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/|offset|length|220192|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Use the sepia filter along with hue-rotate, brightness, and saturation to create any color we want.</p>

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

<p><a href="https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/" rel="noreferrer">https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/</a></p>


blocks|key|438378|text|可以使用亮度滤镜，任何大于1的值都会使元素变亮，而任何小于1的值会使元素变暗。因此，我们可以使这些亮的svg变暗，反之亦然，例如，这将使svg更暗：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|438379|filter:+brightness(0);|code-block|syntax|javascript|438380|为了改变颜色，而不仅仅是亮度级别，我们可以使用深褐色滤镜以及色调-旋转，亮度，例如：|438381|.colorize-blue+{
++filter:+brightness(0.5)+sepia(1)+hue-rotate(140deg)+saturate(6);
}|438382|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use the brightness filter, any value greater than 1 makes the element brighter, and any value less than 1 makes it darker. So, we can make those light SVG’s dark, and vice versa, for example, this will make the svg darker:</p>
<pre><code>filter: brightness(0);
</code></pre>
<p>In order to change the color and not only brightness level we can use sepia filter along with hue-rotate, brightness, for example:</p>
<pre><code>.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}
</code></pre>


blocks|key|220282|text|如果你想通过url()直接在CSS上使用和SVG，就像这样；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|220283|a:before+{
++content:+url('data:image/svg%2Bxml;+utf8,+<svg+xmlns="http://www.w3.org/2000/svg"+x="0"+y="0"+viewBox="0+0+451+451"><path+d="M345.441,2...|code-block|syntax|javascript|220284|您应该将#编码为%2523，否则它将无法工作。|220285|<svg+fill="%2523FFF"+...|220286|entityMap^0|6|5|0|0|4|1|8|3|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>If you are trying to use and SVG directly on CSS with <code>url()</code> like this;</p>
<pre><code>a:before {
  content: url('data:image/svg+xml; utf8, &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; x=&quot;0&quot; y=&quot;0&quot; viewBox=&quot;0 0 451 451&quot;&gt;&lt;path d=&quot;M345.441,2...
</code></pre>
<p>You should encode the <code>#</code> to <code>%23</code>, otherwise it won't work.</p>
<pre><code>&lt;svg fill=&quot;%23FFF&quot; ...
</code></pre>


blocks|key|220344|text|我找到的解决这个问题的唯一方法是使用PHP呈现SVG，并传递查询字符串来设置颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|220345|SVG，这里称为"arrow.php“|220346|<?php
$fill+=+filter_input(INPUT_GET,+'fill');
$fill+=+strtolower($fill);
$fill+=+preg_replace("/[%5Ea-z0-9]/",+'',+$fill);
if(empty($fill))+$fill+=+"000000";
header('Content-type:+image/svg%2Bxml');
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>|code-block|syntax|javascript|220347|然后，您可以这样调用图像|220348|.cssclass{+background-image:+url(arrow.php?fill=112233);+}|220349|仅适用于PHP。请记住，每次更改颜色值时，浏览器都会加载一个新图像。|220350|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The only way i found for this, and to be cross browser (aka bulletproof), is to render the SVG with PHP and pass Query String to set the color.</p>
<p>The SVG, here called &quot;arrow.php&quot;</p>
<pre><code>&lt;?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace(&quot;/[^a-z0-9]/&quot;, '', $fill);
if(empty($fill)) $fill = &quot;000000&quot;;
header('Content-type: image/svg+xml');
echo '&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;';
?&gt;
&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;7.4&quot; height=&quot;12&quot; viewBox=&quot;0 0 7.4 12&quot;&gt;
    &lt;g&gt;
        &lt;path d=&quot;M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z&quot; transform=&quot;translate(-8.6 -6)&quot; fill=&quot;#&lt;?php echo htmlspecialchars($fill); ?&gt;&quot; fill-rule=&quot;evenodd&quot;/&gt;
    &lt;/g&gt;
&lt;/svg&gt;
</code></pre>
<p>Then you call the image like this</p>
<pre><code>.cssclass{ background-image: url(arrow.php?fill=112233); }
</code></pre>
<p>Works only with PHP. And remember that everytime you change the color value, your browser will load a new image.</p>


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

<pre class="lang-css prettyprint-override"><code>polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}
</code></pre>

<p>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.  </p>

<pre class="lang-css prettyprint-override"><code>html {      
    background-image: url(../img/bg.svg);
}
</code></pre>

<p>How can I change the colors now?  Is it even possible?</p>

<p>For reference, here are the contents of my external SVG file:</p>

<pre class="lang-svg prettyprint-override"><code>&lt;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"&gt;
&lt;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 "/&gt;
&lt;circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/&gt;
&lt;/svg&gt;
</code></pre>


How to modify the fill color of an SVG image when being served as background image?

服务器

将SVG输出直接内联到页面代码中，我可以简单地使用CSS修改填充颜色，如下所示：polygon.mystar {    fill: blue;}​circle.mycircle {    fill: green;}这很有效，但是我正在寻找一种方法来修改SVG的"fill“属性，当它被用作背景图像时。html {    ...

问如何修改SVG图片作为背景图片的填充颜色？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修改SVG图片作为背景图片的填充颜色？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何修改SVG图片作为背景图片的填充颜色？
EN