求助：SVG Logo在CSS中应用反色滤镜无效问题

1. 修正CSS选择器匹配问题 #

你的HTML结构中，div的属性是id="logo"，img的class是title my-5，但CSS里用的是.logo（类选择器），这会导致样式无法匹配到目标元素。你需要把选择器改成以下任意一种：

• 针对父级div下的img：#logo img
• 直接针对img的class：.title

修改后的CSS示例：

#logo img {
    filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(107%) contrast(101%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

2. 检查SVG导出设置（关键） #

如果选择器修正后样式仍不生效，大概率是Illustrator导出的SVG内嵌了固定填充色，导致CSS滤镜无法覆盖。导出SVG时需调整以下设置：

• 在Illustrator的SVG选项面板中，将**“颜色”**设置为“保留编辑能力”，确保图形的填充色没有被硬编码为固定值（比如不要设置具体的十六进制/RGB颜色）。
• 导出后可打开SVG文件检查，若图形元素带有fill="#xxxxxx"这类固定颜色属性，删除该属性或改为fill="currentColor"，让SVG颜色可被外部CSS影响。

3. 调整滤镜参数（可选） #

若想要更接近目标反色效果，可尝试简化滤镜逻辑，基础反色用invert(1)，再按需调整亮度与对比度：

#logo img {
    filter: invert(1) brightness(105%) contrast(102%);
    /* 保留原有定位样式 */
}

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