如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色? [英] How to change color of SVG image using CSS (jQuery SVG image replacement)?

问题描述

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

This is a self Q&A of a handy piece of code I came up with.

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

Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state.

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

So here is what I came up with, which I think is by far the easiest way to use SVG files on a website. It takes its concept from the early text-to-image replacement methods, but as far as I am aware has never been done for SVGs.

问题来了:

推荐答案

首先，在 HTML 中使用 IMG 标签来嵌入 SVG 图形.我使用 Adob​​e Illustrator 制作图形.

Firstly, use an IMG tag in your HTML to embed an SVG graphic. I used Adobe Illustrator to make the graphic.

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

这就像您嵌入普通图像的方式.请注意，您需要将 IMG 设置为具有 svg 类.'social-link' 类只是为了举例.ID 不是必需的，但很有用.

This is just like how you'd embed a normal image. Note that you need to set the IMG to have a class of svg. The 'social-link' class is just for examples sake. The ID is not required, but is useful.

然后使用此 jQuery 代码(在单独的文件中或在 HEAD 中内联).

Then use this jQuery code (in a separate file or inline in the 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 的颜色，如下所示:

What the above code does is look for all IMG's with the class 'svg' and replace it with the inline SVG from the linked file. The massive advantage is that it allows you to use CSS to change the color of the SVG now, like so:

svg:hover path {
    fill: red;
}

我编写的 jQuery 代码还移植了原始图像 ID 和类.所以这个 CSS 也有效:

The jQuery code I wrote also ports across the original images ID and classes. So this CSS works too:

#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

这篇关于如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！