如何让SVG填充与背景色相反的颜色？

要让SVG在黑色背景显示白色填充、白色背景显示黑色填充，只需调整SVG的填充色并保留现有混合模式即可，以下是修改后的完整代码：

修改后的HTML #

<div>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <path fill="white" d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
   </svg>
</div>

修改后的CSS #

:root {
  --norm-col: #000;
  --bg-color: #fff;
}

div {
  background: linear-gradient(
                to bottom right, 
                var(--norm-col) 0%, 
                var(--norm-col) 50%, 
                var(--bg-color) 50%, 
                var(--bg-color) 100%);
  width: fit-content;
  padding: 8px;
}

div svg {
  width: 30px;
  height: 30px;
  mix-blend-mode: difference;
}

原理说明 #

• 给SVG路径设置fill="white"作为基础填充色
• mix-blend-mode: difference会计算前景与背景的颜色差值：
  • 黑色背景下，白色与黑色的差值为白色，直接显示白色填充
  • 白色背景下，白色与白色的差值为黑色，自动反转成黑色填充
• 补充:root变量定义和容器的宽、内边距，让效果更直观

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