编辑您的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/

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

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

如果你的形状总是一种纯色，而且你有两个以上的纯色，你可以使用Fontello，用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例，这是一个需要考虑的基本范例。我在很多项目中都使用过它。无论如何，如果你没有听说过Fontello，你需要去了解一下。如果你知道一个类似的更好的解决方案，我很想知道。

可能的失败:

众所周知，图标/形状字体会干扰屏幕阅读器，所以这可能需要一些处理。 Fontello在导入形状时可能很挑剔，在创建和导出形状时可能需要一些尝试和错误。 避免任何和所有分组，只使用单一的非嵌套复合形状。

简单的 JS

使用以下简短的函数ImgToSvg将img转换为svg(包括类列表)

<img src="logo.svg" onload="ImgToSvg(this)" class="logo-img"/>

const ImgToSvg= async (img) => { const s = document.createElement('div'); s.innerHTML = await (await fetch(img.src)).text(); s.firstChild.classList = img.classList; img.replaceWith(s.firstChild) } .logo-img { fill: yellow; } <img onload="ImgToSvg(this)" class="logo-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9InN0cm9rZTojNTU1NTU1O3N0cm9rZS13aWR0aDoyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlLCBzYW5zLXNlcmlmIiBmaWxsPSIjNTU1NTU1Ij4zMDAmIzIxNTszMDA8L3RleHQ+PC9zdmc+" /> <!-- in this snippet I use dataURI in img src to avoid CORS problems witch reading svg data from external source by js -->

这是对Waruyama answer的改进，提供了简短的js函数

直接到svg填充css将不工作，你可以使用如下

<style>
svg path {
    fill: red;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

这对我很有效

这对于想要使用CSS操作的PHP和.svg图像组合使用的人可能很有帮助。

你不能用CSS覆盖img标签内的属性。但是当svg源代码嵌入到HTML中时，你当然可以。我喜欢用require_once函数来解决这个问题，其中包含一个.svg.php文件。这就像导入一个图像，但你仍然可以用CSS覆盖样式!

首先包含svg文件:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

它包括这个图标，例如:

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

现在我们可以像这样用CSS简单地改变填充颜色:

svg path {
  fill: blue;
}

我首先尝试用file_get_contents()解决这个问题，但上面的解决方案要快得多。