html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。
当前回答
在代码编辑器中打开SVG图标，并在path标记后添加一个类:
<path class'colorToChange' ...
你可以向svg添加class，并像这样改变颜色:
codepen
其他回答
首先必须将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的合著者
这个答案是基于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/
这是一个老问题，但最近我们遇到了同样的问题，我们从服务器端解决了它。这是一个php特定的答案，但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG，而不是使用img标记。
public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}
现在呈现文件时，您将得到完整的内联SVG
如果你的目标只是改变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>
．.． 只需更改填充并保存。
简单的 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函数
