使用CSS修改image标签引入的SVG图标颜色不生效如何解决

失效原因 #

你当前通过<image>标签将外部SVG作为图片资源嵌入，CSS的fill属性仅能作用于当前页面DOM内的原生SVG元素，嵌入图片内部的SVG结构不属于当前页面DOM树，无法被CSS识别控制，因此设置的fill不会生效。

可选解决方案 #

• 方案1：内嵌SVG代码（最推荐）
  直接把some-icon.svg文件的内部代码复制出来，替换当前的<svg>+<image>结构，直接插入到页面中，后续就可以通过CSS自由控制颜色、添加交互效果：

  /* 默认颜色 */
  .menu-item svg {
    fill: #333;
    transition: fill 0.2s ease;
  }
  /* hover、选中状态颜色 */
  .menu-item:hover svg,
  .menu-item.active svg {
    fill: red;
  }
  

  该方案兼容性最好，调整灵活，还可以自定义SVG内部其他路径的样式。

• 方案2：使用CSS filter滤镜
  如果不想改动HTML结构，可以通过滤镜调整图片颜色，需要先将目标颜色转换为对应的滤镜参数：

  .menu-item:hover svg image {
    /* 该滤镜对应纯红色，其他颜色可自行通过CSS滤镜颜色转换逻辑生成对应参数 */
    filter: brightness(0) saturate(100%) invert(15%) sepia(97%) saturate(7380%) hue-rotate(1deg) brightness(101%) contrast(109%);
  }
  

  该方案不需要修改DOM，缺点是颜色匹配精度有限，复杂颜色调整难度高。

• 方案3：使用mask遮罩实现
  将SVG作为遮罩层，通过修改背景色实现图标换色：

  <div class="menu-icon"></div>
  

  .menu-icon {
    width: 90px;
    height: 90px;
    background-color: #333;
    /* 兼容webkit内核浏览器 */
    -webkit-mask: url('./images/menu-icons/some-icon.svg') no-repeat center / contain;
    mask: url('./images/menu-icons/some-icon.svg') no-repeat center / contain;
  }
  .menu-item:hover .menu-icon {
    background-color: red;
  }
  

  该方案修改颜色方便，仅需调整background-color属性即可，现代浏览器均支持。

内容的提问来源于stack exchange，提问作者Miro