这是我想出的一小段代码的自我问答。
当前，没有一种简单的方法可以嵌入SVG图像，然后可以通过CSS访问SVG元素。有多种使用JS SVG框架的方法，但是如果您要做的只是制作带有过渡状态的简单图标，它们将过于复杂。
所以这就是我想出的，我认为这是迄今为止在网站上使用SVG文件的最简单方法。它的概念来自早期的文本到图像替换方法，但据我所知，从未对SVG进行过处理。
这是问题：
如何使用CSS更改SVG图像的颜色（jQuery SVG图像替换）？
第2195篇《如何使用CSS更改SVG图像的颜色（jQuery SVG图像替换）？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共9个回答
TL / DR：转到此处-> https://codepen.io/sosuke/pen/Pjoqqp
说明：
我假设您有类似这样的html：
<img src="/img/source.svg" class="myClass">
绝对走过滤路线，即。您的svg很可能是黑色或白色。您可以应用一个滤镜以使其成为所需的任何颜色，例如，我有一个黑色的svg，我想要薄荷绿色。我首先将其反转为白色（从技术上来说，这是所有RGB颜色都完整的），然后使用色相饱和度等。要正确处理：
filter: invert(86%) sepia(21%) saturate(761%) hue-rotate(92deg) brightness(99%) contrast(107%);
更好的是，您可以使用一种工具将所需的十六进制转换为过滤器：https : //codepen.io/sosuke/pen/Pjoqqp
Since SVG is basically code, you need just contents. I used PHP to obtain content, but you can use whatever you want.
<?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
我写了一条指令来解决AngularJS的问题。在此处可用-ngReusableSvg。
呈现后，它将替换SVG元素，并将其放置在div元素内，从而使其CSS易于更改。这有助于在不同位置使用不同大小/颜色使用相同的SVG文件。
用法很简单：
<object oa-reusable-svg
data="my_icon.svg"
type="image/svg+xml"
class="svg-class"
height="30" // given to prevent UI glitches at switch time
width="30">
</object>
之后，您可以轻松拥有：
.svg-class svg {
fill: red; // whichever color you want
}
有一个名为SVGInject的开源库，该库使用该onload属性来触发注入。您可以在https://github.com/iconfu/svg-inject找到GitHub项目
这是使用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的合著者
我意识到您想使用CSS来完成此操作，但是只是提醒一下，如果它是一个小而简单的图像-您始终可以在Notepad ++中将其弹出打开并更改路径/其他元素的填充：
<path style="fill:#010002;" d="M394.854,205.444c9.218-15.461,19.102-30.181,14.258-49.527
...
C412.843,226.163,402.511,211.451,394.854,205.444z"/>
它可以节省大量的丑陋脚本。很抱歉，如果它不在基地，但是有时简单的解决方案可能会被忽略。
...即使交换多个svg图片，其大小也可能小于此问题的某些代码段。
如果您可以在页面中包含文件（PHP包含或通过选择的CMS包含），则可以添加SVG代码并将其包含到页面中。这与将SVG源代码粘贴到页面中相同，但是使页面标记更整洁。
好处是您可以通过CSS定位SVG的各个部分以进行悬停-不需要javascript。
http://codepen.io/chriscoyier/pen/evcBu
您只需要使用如下CSS规则：
#pathidorclass:hover { fill: #303 !important; }
请注意，该!important位是覆盖填充颜色所必需的。
或者，您可以使用CSS mask，授予浏览器支持不是很好，但是可以使用后备
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
现在，您可以在大多数现代浏览器（包括Edge，但不包括IE11）中使用CSS filter属性。它适用于SVG图像以及其他元素。您可以使用或修改颜色，尽管它们不允许您单独修改其他颜色。我使用以下CSS类显示图标的“禁用”版本（其中原始图片是具有饱和色的SVG图片）：hue-rotateinvert
.disabled {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
在大多数浏览器中，这使其变为浅灰色。在IE（可能还没有测试过的Opera Mini）中，它的不透明度属性会使其褪色，尽管它不是灰色，但看起来仍然不错。
这是一个示例，其中包含四个不同的Twemoji铃声图标CSS类：原始（黄色），上述“禁用”类，hue-rotate（绿色）和invert（蓝色）。
.twa-bell {
background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
height: 3em;
width: 3em;
margin: 0 0.15em 0 0.3em;
vertical-align: -0.3em;
background-size: 3em 3em;
}
.grey-out {
opacity: 0.4;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
.hue-rotate {
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
}
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span class="twa-bell"></span>
<span class="twa-bell grey-out"></span>
<span class="twa-bell hue-rotate"></span>
<span class="twa-bell invert"></span>
</body>
</html>相似问题
问题类别
如果这是静态更改，请在Adobe Illustrator（或任何合适的SVG编辑器）中打开SVG文件，然后更改颜色并保存。