如何在CSS中修改SVG文件的滤镜颜色？现有代码不生效求助

数据老陈

2026-7-29

解决SVG滤镜在伪元素中不生效的问题

问题根源

你设置的display: contents会让伪元素本身不生成任何渲染盒模型，而CSS滤镜需要作用在元素的盒模型上，这直接导致滤镜无法生效。

可行解决方案

移除display: contents并确保元素有盒模型
删掉这个属性后，伪元素会生成默认盒模型，滤镜就能正常作用在SVG上了。如果需要调整SVG布局，还可以显式设置display: inline-block方便控制尺寸：
```
.list-dots-menu-right::before {
  content : url("../image/svg/dots-six-vertical.svg");
  filter  : invert(0%) sepia(0%) saturate(21%) hue-rotate(38deg) brightness(60%) contrast(105%);
  display: inline-block;
}
```

改用内联SVG（Data URI方式）
部分浏览器对外部引入的SVG在伪元素中应用滤镜支持不佳，你可以把SVG代码转换成Data URI直接写在content里，兼容性会更好：

.list-dots-menu-right::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C10.9 2 10 2.9 10 4S10.9 6 12 6 14 5.1 14 4 13.1 2 12 2zm0 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
  filter: invert(0%) sepia(0%) saturate(21%) hue-rotate(38deg) brightness(60%) contrast(105%);
  display: inline-block;
}

注：上述Data URI是示例SVG，你需要将自己的dots-six-vertical.svg代码转换成Data URI后替换进去。