如果你只是在真实颜色和黑白之间切换图像，你可以设置一个选择器为:

{过滤器:没有;}

另一个是:

{filter:grayscale(100%);}

如果你的目标只是改变logo的颜色，你不一定需要使用CSS，那么不要使用javascript或jquery，因为之前的一些回答建议。

要精确地回答最初的问题，只需:

在文本编辑器中打开logo.svg。 寻找fill: #fff并将其替换为fill: #000

例如，你的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>

．.． 只需更改填充并保存。

这个答案是基于https://stackoverflow.com/a/24933495/3890888，但是使用了一个简单的JavaScript版本的脚本。

您需要将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);

    });

});

然后，现在如果你这样做了:

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

或者可能是:

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

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

来自@Praveen的答案是可靠的。

我不能让它在我的工作中响应，所以我为它做了一个jquery悬停函数。

CSS

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

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

在代码编辑器中打开SVG图标，并在path标记后添加一个类:

<path class'colorToChange' ...

你可以向svg添加class，并像这样改变颜色:

codepen

简单. .

你可以使用下面的代码:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

首先指定svg的路径，然后写入它的ID，在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。

在css中:

.logo {
  fill: red;
}