如何在活动时更改 svg 图像的颜色？

Question

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

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

我有两种家庭形象。正常情况下使用的 home.svg 和 home 链接处于活动状态时使用的 homeActive.svg。两张图除了颜色完全一样。

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

Answer 1

有什么方法可以改变颜色而不加载两个 图片类型。

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

我使用了 4 个 .key 键图标实例，每个实例在悬停时都使用不同的 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>

Answer 2

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

"宿主文档中的选择器无法查询 SVG 文档 作为外部资源嵌入，而不是与 宿主文档标记。”

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

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

如果/需要时，我会编辑此回复。