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

问题描述

这是我提出的一个方便的代码片段的自我Q& A。

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文件的最简单的方法。它从早期的文本到图像替换方法的概念，但就我所知从来没有为SVGs。

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.

这是问题： / p>

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

This is the question:

推荐答案

首先，在HTML中使用IMG标记来嵌入SVG图形。我使用Adobe 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的类。 社交链接类仅仅是为了例子。

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/imgtoto -svg.html

You can see an example of it working here: 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

We have a more complicated version that includes caching here: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

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