CSS（jQuery SVG イメージの置き換え）を使用して SVG イメージの色を変更するにはどうすればいいですか? 質問する

まず、HTML で IMG タグを使用して SVG グラフィックを埋め込みます。私は Adob​​e Illustrator を使用してグラフィックを作成しました。

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

これは通常の画像を埋め込む方法とまったく同じです。IMG を svg クラスに設定する必要があることに注意してください。'social-link' クラスは単なる例です。ID は必須ではありませんが、便利です。

次に、この jQuery コードを使用します (別のファイル内または HEAD 内のインライン)。

    /**
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

svg:hover path {
    fill: red;
}

#facebook-logo:hover path {
    fill: red;
}

.social-link:hover path {
    fill: red;
}