img src SVG使用CSS更改样式

本文翻译自：img src SVG changing the styles with CSS

html html

<img src="logo.svg" alt="Logo" class="logo-img">

css 的CSS

.logo-img path {
  fill: #000;
}

The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with SVG and I am not sure why it's not working. 上面的svg加载并以本地方式fill: #fff但是当我使用上面的css尝试将其更改为黑色时，它并没有改变，这是我第一次玩SVG，我不确定为什么它不起作用。

---

#1楼

参考：https://stackoom.com/question/1gcK6/img-src-SVG使用CSS更改样式

---

#2楼

You need to make the SVG to be an inline SVG . 您需要使SVG成为嵌入式SVG 。 You can make use of this script, by adding a class svg to the image: 您可以通过向图像添加svg类来使用此脚本：

/*
 * 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');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

And then, now if you do: 然后，如果您这样做：

.logo-img path {
  fill: #000;
}

Or may be: 或者可能：

.logo-img path {
  background-color: #000;
}

This works! 这可行！

Fiddle: http://jsfiddle.net/wuSF7/462/ 小提琴： http : //jsfiddle.net/wuSF7/462/

Credits for the above script: Changing the colour of SVG Images using CSS & jQuery and How to change color of SVG image using CSS (jQuery SVG image replacement)? 以上脚本的功劳： 使用CSS和jQuery 更改SVG图像的颜色，以及如何 使用CSS 更改SVG图像的颜色（jQuery SVG图像替换）？

---

#3楼

The answer from @Praveen is solid. @Praveen的回答很可靠。

I couldn't get it to respond in my work, so I made a jquery hover function for it. 我无法在工作中响应它，所以我为此做了一个jquery悬停功能。

CSS 的CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery JS / jQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

---

#4楼

If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers. 如果您的目标只是更改徽标的颜色，而不必使用CSS，则不要使用以前的答案所建议的javascript或jquery。

To precisely answer the original question, just: 要精确回答原始问题，只需：

1. Open your logo.svg in a text editor. 在文本编辑器中打开您的logo.svg 。

2. look for fill: #fff and replace it with fill: #000 寻找fill: #fff然后将其替换为fill: #000

For example, your logo.svg might look like this when opened in a text editor: 例如，在文本编辑器中打开时，您的logo.svg可能如下所示：

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... just change the fill and save. ...只需更改填充并保存。

---

#5楼

Why not create a webfont with your svg image or images, import the webfont in the css and then just change the color of the glyph using the css color attribute? 为什么不使用您的一个或多个svg图像创建webfont，将webfont导入css，然后仅使用css color属性更改字形的颜色？ No javascript needed 不需要JavaScript

---

#6楼

If you have access to JQuery, then extending to Praveen's answer one can programatically change color of different nested elements inside SVG by: 如果您可以访问JQuery，则可以通过以下方式扩展到Praveen的答案，以编程方式更改SVG中不同嵌套元素的颜色：

$('svg').find('path, text').css('fill', '#ffffff');

Within find, you can mention different elements that needs to be changed in color. 在find中，您可以提及需要更改颜色的不同元素。