如何仅修改CSS让页面除SVG外应用invert与hue-rotate滤镜？

有两种简单的CSS修改方式可以实现需求，让页面整体应用深色模式滤镜但排除SVG及其内容：

方法一：直接覆盖SVG的滤镜属性 #

给SVG元素设置filter: none，直接清除继承自<html>的滤镜效果，代码修改如下：

body{background-color:white}
html{filter:invert(1)hue-rotate(180deg)}
svg{filter: none;} /* 新增这行 */

这种方式最直接，利用CSS属性的覆盖特性，让SVG不受父元素滤镜的影响，保持原有颜色显示。

方法二：仅给非SVG元素应用滤镜 #

如果不想给<html>整体加滤镜，可以把滤镜范围限定在除SVG及其子元素外的所有元素：

body{background-color:white}
html *:not(svg):not(svg *) {
  filter:invert(1)hue-rotate(180deg)
}

这里通过:not()选择器精准排除SVG元素和它内部的所有子元素，只对其他元素应用深色模式滤镜。

测试两种方法后，SVG里的红、绿、蓝矩形都会保持原本的颜色，而页面其他区域会正常切换为深色模式。

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