如何在活动状态下更改svg图像的颜色？

如何解决如何在活动状态下更改svg图像的颜色？

我正在使用src元素中的img属性导入svg。

例如：<img src="/images/home.svg" />

我有两种家庭形象。正常情况下使用home.svg，home链接处于活动状态时使用homeActive.svg。除了颜色，这两个图像完全相同。

当前，我使用if语句动态地显示一个图像。有什么方法可以改变颜色而不加载两种图像。

解决方法

有什么方法可以改变颜色而无需加载两个 种类的图像。

您可以使用CSS filters更改悬停时的颜色

我使用了.key键图标的4个实例，并且每个实例的鼠标悬停时都有不同的CSS过滤器着色

.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
   transition:  0.8s;
   }
:hover.key{
     -webkit-filter: hue-rotate(320deg);
     filter: hue-rotate(320deg);
   }
.grey-out {
  opacity: 0.4;
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);

  
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

更新

您可以使用utility来选择所需颜色的滤镜组合

例如红色：

.container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
    }
:hover.key{
     -webkit-filter: invert(27%) sepia(100%) saturate(7373%) hue-rotate(359deg) brightness(106%) contrast(109%);
     filter: invert(27%) sepia(100%) saturate(7373%) hue-rotate(359deg) brightness(106%) contrast(109%);
   }

<div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f505.svg"> 
  
</div>

,

Can you use CSS selectors on SVG rendered via CSS Data URI?

”主文档中的选择器无法查询以下内容的SVG文档： 嵌入为外部资源，而不是与 主机文档标记。”

如果是通过background或background-image属性调用的，则无法更改svg元素的填充或描边颜色。 您需要在代码中包含html格式的svg，“内联”才能通过css定位它们的各个片段。

可能还有其他方法可以通过调用单个图像来解决此问题，但是它们取决于上下文。请提供代码的最小可复制示例（使用stackoverflow提供的代码段工具）或指向Codepen或类似网站的链接。

如有必要，我将编辑此答复。