问题:

This question already has an answer here:

Modify SVG fill color when being served as Background-Image 14 answers

If I load SVG image via css background-image like this:

.icon {
  background-image: url('icon.svg');
}

How can i change fill color of shapes inside that icon or whole icon itself?

Thanks.

回答1:

Edit it in an XML editor and if you know the color values, just change it.

Or, you can go to THIS LINK and make your edit.

Hope this helps.

回答2:

Or if you want to do it dynamically try :

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