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

StackOverflow https://stackoverflow.com/questions/21092559

  •  27-09-2022
  •  | 
  •  

题

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.

有帮助吗？

解决方案 2

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.

其他提示

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top