html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。
当前回答
在您的案例中，主要问题是您从<img>标记导入svg，该标记将隐藏svg结构。
您需要将<svg>标记与<use>结合使用以获得所需的效果。要使其工作，您需要在SVG文件<path id='myName'…>，然后能够从<use xlink:href="#myName"/>标签检索它们。 试试下面剪的。
.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; } <svg width="0" height="0"> <defs> <path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/> </svg> <span class="icon red"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span> <span class="icon blue"> <svg viewbox="0 0 100 100"> <use xlink:href="#home"/> </svg> </span>
注意，如果您想从外部源加载SVG(而不是将其嵌入到HTML中)，则可以将任何URL放在片段#之前。另外，通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。
其他回答
您可以将SVG设置为掩码。通过这种方式设置背景色将充当填充色。
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFiddle： https://jsfiddle.net/KuhlTime/2j8exgcb/ MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/mask
请检查您的浏览器是否支持此功能: https://caniuse.com/#search=mask
因为SVG基本上是代码，所以您只需要内容。我使用PHP来获取内容，但您可以使用任何您想要的内容。
<?php
$content = file_get_contents($pathToSVG);
?>
然后，我已经打印内容“是”在一个div容器
<div class="fill-class"><?php echo $content;?></div>
最后将规则设置为CSS上的容器的SVG子元素
.fill-class > svg {
fill: orange;
}
我用SVG材质图标得到了这个结果:
Firefox 59.0.2(64位)Linux
谷歌Chrome66.0.3359.181 (Build official)(64位)Linux
Opera 53.0.2907.37 Linux
我建议你选好颜色，去这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为css过滤器，例如:#64D7D6
平等的
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
最后一个片段
.filterit { 宽度:270 px; 滤镜:反转(88%)棕褐色(21%)饱和(935%)色调旋转(123deg)亮度(85%)对比度(97%); ｝ < img src = " https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg " 类= " filterit />
如果你的目标只是改变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图标，并在path标记后添加一个类:
<path class'colorToChange' ...
你可以向svg添加class，并像这样改变颜色:
codepen
