[解決済み] CSSを使用してSVG画像の色を変更する方法（jQuery SVG image replacement）とは？

質問

これは、私が思いついた便利なコードの自己Q&Aです。

現在、SVG画像を埋め込んで、CSSでSVG要素にアクセスする簡単な方法はありません。JS SVGフレームワークを利用する方法もありますが、ロールオーバーを伴う単純なアイコンを作るだけなら複雑すぎてできません。

そこで、私が考えたのが、WebサイトでSVGファイルを利用する最も簡単な方法です。これは、初期のテキストから画像への置き換え手法からコンセプトを得たものですが、私の知る限り、SVGに対して行われたことはありません。

これが質問です。

JS-SVGフレームワークを使わずに、SVGを埋め込んでCSSで色を変えるにはどうしたらいいですか？

どのように解決するのですか？

まず、HTMLにIMGタグを使用して、SVGグラフィックを埋め込みます。私はAdobe 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' を持つすべての IMG を探し、リンクされたファイルからインライン SVG に置き換えることです。大きな利点は、CSSを使ってSVGの色を変えることができるようになることです。

svg:hover path {
    fill: red;
}

私が書いたjQueryのコードも、元の画像のIDやclassをまたいで移植しています。なので、このCSSも動作します。

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

または

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

ここで動作例を見ることができます。 http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

ここでは、キャッシュを含むより複雑なバージョンを用意しています。 https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90