设置fill为currentColor的内联SVG在高对比度模式下颜色不更新怎么办

问题原因 #

• 仅将fill: currentColor定义在<svg>根节点时，若子元素（比如你示例中的<path>对应的.cls-1类）存在优先级更高的填充样式，会覆盖父级的继承规则，导致currentColor不生效
• Windows高对比度属于强制颜色模式，旧版Chromium内核浏览器（包括旧版Edge）对该模式下currentColor的动态继承支持存在缺陷，初始渲染取色后，切换高对比度模式时不会自动重新计算currentColor取值
• 未显式声明元素适配强制颜色模式时，浏览器可能会保留SVG的原始渲染结果，不跟随系统颜色更新

解决方案 #

1. 修正样式继承规则 #

调整CSS，显式指定SVG子元素继承填充色，避免优先级冲突：

svg {
  fill: currentColor;
  color: inherit; /* 兜底强制currentColor取父元素实时颜色 */
}
/* 覆盖所有SVG子元素的fill属性，避免自定义类的固定填充样式冲突 */
svg * {
  fill: inherit;
}

如果你的样式表中曾给.cls-1类定义过固定fill值，需要删除该定义或者改成fill: inherit。

2. 适配强制颜色模式 #

新增高对比度模式专属规则，强制跟随系统颜色变化：

@media (forced-colors: active) {
  svg {
    /* 可根据使用场景替换为对应系统颜色关键字：LinkText/ButtonText/HighlightText等 */
    fill: CanvasText;
    forced-color-adjust: auto;
  }
  svg * {
    fill: inherit;
  }
}

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