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

Posted 2023-05-08

【中文标题】如何在活动时更改 svg 图像的颜色？

【英文标题】：How to change the color of a svg image on active?

【发布时间】：2020-12-25 07:52:23

【问题描述】：

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

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

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

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

【问题讨论】：

你应该可以在这里找到答案 - ***.com/questions/9872947/…

可以用js动态改变图片的src

@Abhishek 这就是我现在所做的，但这并不是很好的表现。

【参考方案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>

【参考方案2】：

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

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

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

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

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