imgsrcSVG改变填充颜色-imgsrcSVGchangingthefillcolor

155  

You need to make the SVG to be an inline SVG. You can make use of this script, by adding a class svg to the image:

您需要使SVG成为内联的SVG。您可以使用这个脚本，向图像添加一个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/

Credits for the above script: How to change color of SVG image using CSS (jQuery SVG image replacement)?

上述脚本的优点:如何使用CSS改变SVG图像的颜色(jQuery SVG图像替换)?

72  

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.

   打开你的标志。svg在文本编辑器中。

2. look for fill: #fff and replace it with fill: #000

   寻找填补:# fff和替换它填补:# 000

For example, your logo.svg might look like this when opened in a text editor:

例如,您的标志。svg在文本编辑器中打开时可能是这样的:

... just change the fill and save.

…只需更改填充并保存。

20  

You could set your svg as a mask. That way setting a background-color would act as your fill color.

您可以将svg设置为一个遮罩。这样设置背景颜色就可以作为填充颜色。

HTML

HTML

CSS

CSS

.logo {
    background-color: red;
    -webkit-mask: url(logo.svg) no-repeat center;
    mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/

JSFiddle:https://jsfiddle.net/KuhlTime/2j8exgcb/

Please note that this method is not working for the Edge browser. You can check that by going to this website: https://caniuse.com/#search=mask

请注意，此方法不适用于边缘浏览器。你可以通过这个网站查看:https://caniuse.com/#search=mask。

17  

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');
});

7  

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? No Javascript needed

为什么不使用svg图像或图像创建webfont，在css中导入webfont，然后使用css颜色属性更改字形的颜色呢?不需要Javascript

5  

This answer is based on answer https://stackoverflow.com/a/24933495/3890888 but with a plain Javascript version of the script used there.

这个答案基于以下答案:https://stackoverflow.com/a/24933495/3890888，但是使用的脚本的普通Javascript版本。

You need to make the SVG to be an inline SVG. You can make use of this script, by adding a class svg to the image:

您需要使SVG成为内联的SVG。您可以使用这个脚本，向图像添加一个svg类:

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

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

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

And then, now if you do:

然后，如果你这样做:

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

Or may be:

或者可能是:

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

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

JSFiddle:http://jsfiddle.net/erxu0dzz/1/

5  

To expand on @gringo answer, the Javascript method described in other answers works, but requires the user to download unnecessary image files, and IMO, it bloats your code.

要扩展@gringo应答，其他答案中描述的Javascript方法可以工作，但是需要用户下载不必要的图像文件，而且在IMO上，它会使代码膨胀。

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

我认为更好的方法是将所有的1色矢量图形迁移到webfont文件中。我以前使用过Fort Awesome，它可以很好地将定制的SVG格式的图标/图像与您可能使用的任何第三方图标(字体Awesome、引导图标等)结合到用户必须下载的单个webfont文件中。你也可以定制它，所以你只包括你正在使用的第三方图标。这减少了页面必须发出的请求的数量，并且减少了页面的总体权重，特别是如果已经包含了任何第三方图标库的话。

If you prefer a more dev oriented option, you could Google "npm svg webfont", and use one of the node modules that's most appropriate for your environment.

如果您更喜欢面向开发的选项，那么可以使用谷歌“npm svg webfont”，并使用最适合您的环境的节点模块之一。

Once, you've done either of those two options, then you could easily change the color via CSS, and most likely, you've sped up your site in the process.

有一次，您已经完成了这两个选项中的任何一个，然后您可以通过CSS轻松地更改颜色，而且很有可能，您已经加快了您的站点的进程。

0  

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

美元(svg)。找到(道路、文本)。css(“填满”,“# ffffff”);

Within find, you can mention different elements that needs to be changed in color.

在find中，您可以提到需要更改颜色的不同元素。

0  

The main problem in your case is that you are importing the svg from an tag which will hide the SVG structure.

在您的例子中，主要的问题是您正在从一个将隐藏svg结构的标记导入svg。

You need to use the tag in conjunction with the to get the desired effect. To make it work, you need to give an id to the path you want to use in the SVG file to then be able to retrieve them from the tag. Try the snipped below.

您需要将

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

Note that you can put any URL before the fragment # if you want to load the SVG from an external source (and not embed it into your HTML). Also, usually you do not specify the fill into the CSS. It's better to consider using fill:"currentColor" within the SVG itself. The corresponding element's CSS color value will then be used in place.

注意，如果想从外部源加载SVG(而不是将其嵌入到HTML中)，则可以将任何URL放在片段#之前。此外，通常您不会在CSS中指定填充。最好考虑在SVG内部使用fill:“currentColor”。相应元素的CSS颜色值将被使用。

0  

Since SVG is basically code, you need just contents. I used PHP to obtain content, but you can use whatever you want.

因为SVG基本上是代码，所以只需要内容。我使用PHP获取内容，但是您可以使用任何您想要的内容。

Then, I've printed content "as is" inside a div container

然后，我将内容“as is”打印到div容器中

To finnaly set rule to container's SVG childs on CSS

最后，在CSS中将规则设置为容器的SVG childs

.fill-class > svg { 
    fill: orange;
}

I got this results with a material icon SVG:

我用一个材质图标SVG得到了这个结果:

Mozilla Firefox 59.0.2 (64-bit) Linux

Mozilla Firefox 59.0.2(64位)Linux

Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

谷歌Chrome66.0.3359.181(编译)(64位)Linux

Opera 53.0.2907.37 Linux

歌剧53.0.2907.37 Linux