2

I have a SVG as Background Image in a div. When I add a class "svg" via JQuery I would like to change the fill color of this SVG.

How can I do that?

Here is my Code so far:

<!-- HTML -->
<div id="sg_lines"></div>

<!-- JS -->
$('.glyphs').on('click', function(e){
    $('#sg_lines').addClass('svg');
});

<!-- CSS -->
#sg_lines {
 position: absolute;
 z-index: 299;
 top: 0px;
 left: 0px;
 width: 1320px;
 height: 1080px;
 background-image: url('../../images/lines_foreground.png');
}

#sg_lines.svg img {
 fill: red;
}

Thanks

kay899

kay899
  • 75
  • 1
  • 8

1 Answers1

0

You seem to have a .png as background-image though.

Also, I'm afraid that when you have a svg as the src of an <img> tag or as background-image you can't programatically change its properties such as fill.

You need to somehow refactor your code so it uses an inline svg (that is, the actual svg markup right there among your html markup). That way you can use CSS to alter its properties.

Juan Ferreras
  • 2,801
  • 2
  • 13
  • 16