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

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

  •  27-09-2022
  •  | 
  •  

Pergunta

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.

Foi útil?

Solução 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.

Outras dicas

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top