html
<img src="logo.svg" alt="Logo" class="logo-img">
的CSS
.logo-img path {
fill: #000;
}
上面的svg加载并且是本地的，fill: #fff但是当我使用上面的SVG css尝试将其更改为黑色时，它并没有改变，这是我第一次使用SVG，我不确定为什么它不起作用。
img src SVG使用CSS更改样式
第2626篇《img src SVG使用CSS更改样式》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
由于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的结果：
Mozilla Firefox 59.0.2（64位）Linux
Google Chrome66.0.3359.181（正式版）（64位）Linux
Opera 53.0.2907.37 Linux
为什么不使用一个或多个svg图像创建webfont，将webfont导入css，然后仅使用css color属性更改字形的颜色？无需JavaScript
首先，您必须将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多次注入，则将随机字符串添加到SVG中的每个ID，以避免在文档中多次具有相同的ID。
SVGInject是纯Javascript，可与所有支持SVG的浏览器一起使用。
免责声明：我是SVGInject的合著者
使用滤镜转换为任何颜色。
我最近找到了这个解决方案，希望有人可以使用它。由于该解决方案使用滤镜，因此可以用于任何类型的图像。不只是svg。
如果您只想更改单色图像，则可以在某些滤镜的帮助下完成此操作。当然，它也适用于多色图像，但是您不能指定特定的颜色。只有整个图像。
滤镜来自“ 如何仅使用CSS滤镜将黑色转换为任何给定颜色”中建议的脚本。 如果要将白色更改为任何颜色，可以调整每个滤镜的反转值。
.startAsBlack{
display: inline-block;
width: 50px;
height: 50px;
background: black;
}
.black-green{
filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}
.black-red{
filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}
.black-blue{
filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}
.black-purple{
filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}Black to any color: <br/>
<div class="startAsBlack black-green"></div>
<div class="startAsBlack black-red"></div>
<div class="startAsBlack black-blue"></div>
<div class="startAsBlack black-purple"></div>如果您只是在实色和黑白之间切换图像，则可以将一个选择器设置为：
{filter：none;}
另一个为：
{filter:grayscale(100%);}
为了扩展@gringo答案，可以使用其他答案中描述的Javascript方法，但是需要用户下载不必要的图像文件，并且IMO会膨胀您的代码。
我认为更好的方法是将所有1色矢量图形迁移到webfont文件。我过去曾经使用过Fort Awesome，它将您的SVG格式的自定义图标/图像以及您可能使用的任何第三方图标（Font Awesome，Bootstrap图标等）组合到单个webfont文件中的效果非常好用户必须下载。您也可以对其进行自定义，因此仅包含您正在使用的第三方图标。这样可以减少页面必须发出的请求数量，并且可以减轻页面的整体负担，尤其是如果您已经包含任何第三方图标库的话。
如果您更喜欢面向开发人员的选项，则可以使用Google“ npm svg webfont”，并使用最适合您的环境的节点模块之一。
一旦完成了这两个选项中的任何一个，就可以通过CSS轻松更改颜色，并且很可能在此过程中加快了网站的速度。
尝试纯CSS：
.logo-img {
// to black
filter: invert(1);
// or to blue
// filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}
2018：如果您想要动态颜色，不想使用javascript且不需要内联SVG，请使用CSS变量。适用于Chrome，Firefox和Safari。编辑：和边缘
<svg>
<use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>
在你的SVG，替换的任何实例style="fill: #000"用style="fill: var(--color_fill)"。
您可以将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
Please note that this method is not working for the Edge browser. You can check that by going to this website: https://caniuse.com/#search=mask
如果您的目标只是更改徽标的颜色，而不必使用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的路径，然后输入其ID，在本例中为“ Capa_1”。您可以通过在任何编辑器中打开svg来获取其ID。
在CSS中：