jquery - 如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色？

Question

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

目前，没有一种简单的方法可以嵌入 SVG 图像，然后通过 CSS 访问 SVG 元素。有多种使用 JS SVG 框架的方法，但如果您所做的只是制作一个具有滚动状态的简单图标，它们就会过于复杂。

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

问题是:

如何在不使用 JS-SVG 框架的情况下嵌入 SVG 并在 CSS 中更改其颜色？

Answer 1

首先，在您的 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”类的 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