背景画像としてSVGの塗りつぶしの色を変更するにはどうすればいいですか？

Question

私はdivに背景画像としてSVGを持っています。 JQueryでクラス "svg"を追加すると、このSVGの塗りつぶしの色を変更したいと思います。

どうすればいいですか？ここで

は、これまでのところ、私のコードです：

<!-- 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; 
} 

おかげ

kay899

Answer 1

あなたがが背景画像として.pngを持っているようです。

また、svgを<img>タグのsrcとして使用した場合、またはbackground-imageと入力すると、fillなどのプロパティをプログラムで変更することはできません。

インラインsvgを使用するようにコードをリファクタリングする必要があります（つまり、実際のsvgマークアップがHTMLマークアップの中に表示されます）。そうすればCSSを使ってそのプロパティを変更することができます。