CSS修改SVG图标颜色失效问题求助

你的问题出在SVG内部的<path>元素设置了内联fill属性，内联样式的优先级高于外部CSS，所以你给.navigation-icon设置的fill: red不会生效。

解决方法1：移除path的内联fill属性（推荐） #

直接修改SVG代码，删掉<path>标签里的fill="rgba(0,0,0,1)"属性，这样外部CSS的样式就能正常作用了。

修改后的HTML代码：

<svg class="navigation-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
  <path fill="none" d="M0 0h24v24H0z"/>
  <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/>
</svg>

CSS保持原有代码即可：

.navigation-icon { fill: red; }

解决方法2：强制覆盖内联样式（不推荐，仅当无法修改SVG时使用） #

如果不能修改SVG源码，可以用!important强制覆盖内联的fill属性，但要注意精准选中<path>元素：

.navigation-icon path {
  fill: red !important;
}

补充说明 #

如果尝试给父元素设置样式，同样需要确保样式能传递到SVG内部的<path>，但核心问题始终是内联fill属性的优先级更高，所以优先选择移除内联属性的方案，避免使用!important带来的样式维护问题。

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