如何修改CSS中通过background-image引入的SVG图标的颜色

根本原因 #

你通过background-image引入外部SVG文件时，SVG会被作为独立的图片资源处理，外部CSS无法访问SVG内部的DOM节点，因此直接对伪元素设置fill属性不会生效。

可用解决方案 #

方法1：使用mask遮罩方案（最推荐，无需修改原SVG）

将原background-image相关配置替换为遮罩属性，直接通过background-color控制SVG的显示颜色，修改后的代码如下：

.Collapsible__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  text-decoration: none;
  position: relative;
  border: 1px solid white;
  padding: 10px;
  color: #333;


  &:after {
    content: '';
    /* 兼容webkit内核浏览器 */
    -webkit-mask: url('/icons/plus.svg') no-repeat center / cover;
    mask: url('/icons/plus.svg') no-repeat center / cover;
    /* 此处修改颜色值即可变更SVG颜色 */
    background-color: #333;
    display: inline-block;
    width: 10px;
    height: 10px;
    transition: transform 300ms;
  }
}

该方案支持hover等交互状态下的颜色动态切换，兼容性覆盖绝大多数现代浏览器。

方法2：修改SVG源文件后内联使用

如果可以将SVG直接插入到HTML结构中，你可以修改SVG内部的路径填充属性为currentColor，就可以直接继承父元素的color属性值：
修改后的SVG示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
  <!-- 将fill/stroke设置为currentColor即可继承外部color值 -->
  <path d="M5 1v8M1 5h8" stroke="currentColor" fill="none" stroke-width="2"/>
</svg>

内联使用时直接对.Collapsible__trigger设置color即可同步修改SVG颜色。

方法3：使用CSS滤镜调整颜色

如果不想改动现有代码结构，也可以通过filter属性校准出目标颜色，比如要将SVG改成红色可以添加如下配置：

&:after {
  /* 其他原有属性不变，新增filter配置 */
  filter: brightness(0) saturate(100%) invert(17%) sepia(97%) saturate(7483%) hue-rotate(359deg) brightness(102%) contrast(112%);
}

该方案缺点是需要根据目标颜色计算对应的滤镜参数，适合不需要频繁调整颜色的场景。

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