如何使用CSS（jQuery SVG图像替换）改变SVG图像的颜色？

Question

这是我想出的一段方便的代码的自我问答。

目前，还没有一种简单的方法来嵌入SVG图像，然后通过CSS访问SVG元素。使用JS SVG框架的方法多种多样，但如果您所做的只是制作一个带有滚动状态的简单图标，那么这些方法就过于复杂了。

所以这里是我想出的，我认为这是迄今为止在一个网站上使用SVG文件的最简单的方法。它的概念来自早期的文本到图像的替换方法，但据我所知，SVG从来没有这样做过。

这就是问题所在：

Answer 1

风格

svg path {
    fill: #000;
}

脚本

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

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

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

Answer 2

首先，在HTML中使用IMG标记嵌入SVG图形。我使用Adobe Illustrator制作图形。

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

这就像嵌入普通图像一样。请注意，您需要将IMG设置为具有SVG类。“社交链接”类只是为了举例而已。ID不是必需的，但很有用。

然后使用这段jQuery代码（在单独的文件中或在头部内联）。

    /**
     * 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和类端口。所以这个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