htmlで設定した画像の色変えたい

htmlで設定した画像の色を変更したいです

<ul> <li> <img class="svg" src="img/svg/gift.svg" alt="#" /> <label>Birthday:</label>1998年10月8日 </li> <li> <img class="svg" src="img/svg/calendar-4.svg" alt="#" /> <label>Age:</label> 21歳 </li> <li> <img class="svg" src="img/svg/location-1.svg" alt="#" /> <label>Location:</label> <a class="href_location" href="#">愛知県名古屋市</a> </li> <li> <img class="svg" src="img/svg/game-controller-2.svg" alt="#" /> <label>Interests:</label> スケートボード　サッカー　フットサル　 </li> <li> <img class="svg" src="img/svg/study-5.svg" alt="#" /> <label>Study:</label> <a class="href_location" href="#">国際経営</a> </li> <li> <img class="svg" src="img/svg/degree-1.svg" alt="#" /> <label>Degree:</label> 大学卒業見込み </li> <li> <img class="svg" src="img/svg/message-3.svg" alt="#" /> <label>Mail:</label> <a href="mailto:example@gmail.com">kentaintofutsal@gmail.com</a> </li>

                </ul>

上記の中の画像の色を変えたいのですが、変えることができないです。
background-colorはしっかり反映されます

css
.svg{
width: 17px;
height: 17px;
color: red;
position: absolute;

left: 0px;
top: 6px;

}

行動規範の内容に同意します

回答1件

ベストアンサー

imgタグで読み込んだsvgの色を変えるにはインラインsvgに変換する必要があります。
以下、他のサイトに書かれているものの丸写しになりますが、使えると思うのでご参考までに。

jQuery
1jQuery('img.svg').each(function(){
2    var $img = jQuery(this);
3    var imgID = $img.attr('id');
4    var imgClass = $img.attr('class');
5    var imgURL = $img.attr('src');
6
7    jQuery.get(imgURL, function(data) {
8        var $svg = jQuery(data).find('svg');
9
10        if(typeof imgID !== 'undefined') {
11            $svg = $svg.attr('id', imgID);
12        }
13        
14        if(typeof imgClass !== 'undefined') {
15            $svg = $svg.attr('class', imgClass+' replaced-svg');
16        }
17
18        
19        $svg = $svg.removeAttr('xmlns:a');
20
21        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
22            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
23        }
24
25        $img.replaceWith($svg);
26
27    }, 'xml');
28
29});