Change fill color of SVG image loaded via background-image [duplicate]

问题

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

来源：https://stackoverflow.com/questions/21092559/change-fill-color-of-svg-image-loaded-via-background-image

标签

css