为了扩展@gringo的答案，在其他答案中描述的Javascript方法是有效的，但需要用户下载不必要的图像文件，而且在我看来，它会膨胀你的代码。

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.

如果你更喜欢一个更面向开发的选项，你可以谷歌"npm svg webfont"，并使用一个最适合你的环境的节点模块。

一旦你完成了这两个选项中的任何一个，那么你就可以很容易地通过CSS改变颜色，而且很可能，你已经在这个过程中加快了你的网站。

这个答案是基于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/

为什么不创建一个webfont与您的svg图像或图像，导入webfont在css，然后只是改变字形的颜色使用css的颜色属性? 不需要javascript

如果你的目标只是改变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>

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

编辑您的SVG文件，将fill="currentColor"添加到SVG标记中，并确保从文件中删除任何其他填充属性。

例如:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

注意，currentColor是一个关键字(不是使用的固定颜色)。

在此之后，您可以使用CSS更改颜色，通过设置元素的颜色属性或从它的父元素。

例子:

.div-with-svg-inside {
    color: red;
}

我忘了说，你必须这样插入SVG:

<svg>
   <use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>

如果image来自某个变量，那么

<svg>
  <use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>

Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.

Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]


  [1]: https://css-tricks.com/cascading-svg-fill-color/

如果你想要一个动态的颜色，不想使用javascript，也不想使用内联SVG，使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge

<svg>
    <use href="logo.svg" style="--color_fill: #000;"></use>
</svg>

在SVG中，将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。