CSS滤镜过渡异常：悬停时出现非预期颜色如何解决？

使用CSS滤镜+transition实现白色到蓝紫色的切换时，过渡过程中出现粉色等非预期颜色。相关代码如下：

CSS代码

#discord-logo {
  filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(2%) hue-rotate(324deg) brightness(106%) contrast(101%);
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: filter 0.2s linear;
}

#discord-logo:hover {
  filter: brightness(0) saturate(100%) invert(35%) sepia(88%) saturate(2498%) hue-rotate(224deg) brightness(96%) contrast(90%);
}

HTML代码

<object id="discord-logo" type="image/svg+xml" data="../assets/discord.svg">
     Discord Logo
</object>

曾考虑采用opacity过渡方案：将紫色SVG置于白色SVG下方，通过顶部SVG的opacity过渡至0来显示紫色。询问是否有更优方案避免过渡时出现非预期颜色？

方案1：直接修改SVG内部颜色，用CSS控制过渡 #

这是最优方案——滤镜过渡会混合多个参数的中间值导致异常颜色，而直接修改SVG填充色的过渡是纯颜色线性变化，不会出现奇怪中间色。

步骤： #

1. 编辑discord.svg，将所有路径的fill属性替换为可被外部CSS控制的变量或直接开放样式权限：

<!-- 修改后的SVG示例 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path fill="var(--logo-fill, #ffffff)" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.297 17.969c-3.017.069-5.971-.396-8.034-1.721.451.066.893.099 1.35.099 2.571 0 4.822-.996 6.684-2.607-2.309-.045-4.213-1.592-4.822-3.671.31.053.627.079.95.079.457 0 .899-.074 1.322-.21-2.413-.489-4.14-2.549-4.14-4.992 0-.22.01-.437.03-.652.693.385 1.47.617 2.29.644-.827-.549-1.398-1.446-1.398-2.462 0-.547.147-1.065.404-1.525 2.795 3.443 6.743 5.624 11.178 5.9-.15-.677-.237-1.385-.237-2.109 0-4.619 3.744-8.364 8.363-8.364 2.397 0 4.507.985 6.026 2.542 1.883-3.619-.599-7.819-4.299-7.819-1.255 0-2.42.547-3.257 1.398 1.308-.16 2.553-.507 3.705-1.009-.423 1.308-1.308 2.442-2.462 3.169 1.16-.123 2.262-.415 3.288-.819-.774 1.147-1.737 2.143-2.861 2.909z"/>
</svg>

2. 在CSS中通过变量或直接控制fill属性实现过渡：

#discord-logo {
  --logo-fill: #ffffff;
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
}
#discord-logo path {
  fill: var(--logo-fill);
  transition: fill 0.2s linear;
}
#discord-logo:hover path {
  --logo-fill: #5865f2; /* Discord标准蓝紫色 */
}

若担心浏览器对CSS变量过渡的支持，也可以直接写死fill值：

#discord-logo path {
  fill: #ffffff;
  transition: fill 0.2s linear;
}
#discord-logo:hover path {
  fill: #5865f2;
}

方案2：使用mask遮罩+背景色过渡 #

若不想修改SVG，可利用CSS mask将SVG作为遮罩，通过容器背景色的过渡实现颜色切换，同样不会出现异常中间色。

代码示例： #

HTML

<div id="discord-logo-container">
  <object type="image/svg+xml" data="../assets/discord.svg">Discord Logo</object>
</div>

CSS

#discord-logo-container {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  transition: background-color 0.2s linear;
  /* 用SVG作为遮罩 */
  -webkit-mask: url('../assets/discord.svg') center/contain no-repeat;
  mask: url('../assets/discord.svg') center/contain no-repeat;
}
#discord-logo-container:hover {
  background-color: #5865f2;
}
#discord-logo-container object {
  display: none; /* 遮罩已生效，无需显示原SVG */
}

方案3：双层SVG opacity过渡（你提到的方案） #

该方案可行，但需要准备两个不同颜色的SVG，通过绝对定位叠放，控制顶部SVG的opacity实现切换：

HTML

<div id="discord-logo-wrapper">
  <object class="logo logo-purple" type="image/svg+xml" data="../assets/discord-purple.svg">Discord Logo</object>
  <object class="logo logo-white" type="image/svg+xml" data="../assets/discord-white.svg">Discord Logo</object>
</div>

CSS

#discord-logo-wrapper {
  position: relative;
  width: 40px;
  height: 100%;
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.logo-white {
  transition: opacity 0.2s linear;
}
#discord-logo-wrapper:hover .logo-white {
  opacity: 0;
}

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