html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。
当前回答
首先必须将SVG注入到HTML DOM中。
有一个名为SVGInject的开源库可以为您完成这项工作。它使用onload属性来触发注入。
下面是一个使用SVGInject的最小示例:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
图像加载后，onload="SVGInject(this)将触发注入，<img>元素将被src属性中提供的SVG文件的内容所取代。
它解决了SVG注入的几个问题:
svg可以隐藏，直到注射完成。如果在加载时已经应用了样式，这就很重要，否则会导致简短的“无样式内容闪光”。 <img>元素自动注入自身。如果动态添加svg，就不必担心再次调用注入函数。 向SVG中的每个ID添加一个随机字符串，以避免在多次注入SVG时在文档中多次使用相同的ID。
SVGInject是纯Javascript，适用于所有支持SVG的浏览器。
声明:我是SVGInject的合著者
其他回答
如果你的目标只是改变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 class="logo">
<use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>
首先指定svg的路径，然后写入它的ID，在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。
在css中:
.logo {
fill: red;
}
因此，您必须将SVG作为内联HTML使用。
说这是你的logo.svg代码(当你在textEditor上打开它):
Logo.SVG
<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>
添加你想要的Class/ID到它(我添加了'logo-img'):
编辑Svg
<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
...
</svg>
现在应用你的Css规则:
CSS
.logo-img path {
fill: #000;
}
Pro
通过这种方式，您可以对用户的操作(悬停，选中，…)进行动画化。
Con
你的HTML文件会一团糟。
这里是一个堆栈片段
<style> body { display: flex; justify-content: center; } .logo-img path { transition: .5s all linear; } .logo-img path { fill: coral; } .logo-img:hover path{ fill: darkblue; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Note that I've Added Class Attribute 'logo-img' Here --> <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd"> <path d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z" fill="#00000" /> </g> </svg> </body> </html>
我只想改变特定的路径和/或颜色，甚至不同的路径上色。此外，在我的情况下，一些CSS被应用到img标签直接，因此我想让它是原始的img元素，而不是混乱的定位和对齐。
感谢这个答案的启发:https://stackoverflow.com/a/43015413/1444589，这对我来说很有效:
let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;
fetch(imgURL)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, 'text/xml');
let svg = xmlDoc.getElementsByTagName('svg')[0];
let paths = xmlDoc.getElementsByTagName('path');
// access individual path elements directly
let leftShape = paths[0];
leftShape.setAttribute('fill', '#4F4F4F');
// or find specific color
const pathsArr = Array.from(paths);
let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
skirtShape.setAttribute('fill', '#0078D6');
// Replace old SVG with colorized SVG
// positioning and alignment is left untouched
let base64Str = btoa(new XMLSerializer().serializeToString(svg));
img.src = 'data:image/svg+xml;base64, ' + base64Str;
});
编辑您的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/
