iOS/macOS Mail深色模式下SVG遮罩颜色反转致行为异常的解决方法

我有一个通过遮罩实现图形挖洞效果的SVG，简化后的代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="256" height="256" fill="#ffffff" />
      <circle cx="128" cy="128" r="32" fill="#000000" />
    </mask>
  </defs>
  <circle mask="url(#mask)" cx="128" cy="128" r="64" fill="#ff0000" />
</svg>

该SVG在多数场景下能正常显示为环形，但嵌入邮件后，在macOS Mail 16.0（搭配Monterey 12.3.1）或iOS Mail的深色模式下显示异常。经排查，这两款应用会错误修改遮罩中的颜色：将遮罩里的#ffffff替换为深灰色（推测是应用深色模式的背景色#232323），#000000替换为#ffffff，导致遮罩效果完全反转。

我尝试过两种临时方案但均无效：

• 使用prefers-color-scheme为深色模式预反转遮罩颜色，但会导致其他场景下图像显示异常；
• 用linear-gradient(#ffffff,#ffffff)替代纯色填充，结果所有场景下图像都显示失效。

可行解决方案 #

方案1：改用clipPath替代mask

clipPath基于路径形状实现裁剪，不涉及颜色定义，完全避开Mail的颜色反转bug。通过路径的evenodd填充规则实现挖洞效果：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
  <defs>
    <clipPath id="ringClip">
      <!-- 用evenodd填充规则实现大圆环挖去小圆的效果 -->
      <path d="M128 64a64 64 0 1 1 0 128 64 64 0 1 1 0-128M128 96a32 32 0 1 0 0 64 32 32 0 1 0 0-64" fill-rule="evenodd" />
    </clipPath>
  </defs>
  <!-- 应用裁剪路径 -->
  <circle cx="128" cy="128" r="64" fill="#ff0000" clip-path="url(#ringClip)" />
</svg>

evenodd填充规则会交替显示路径的内部区域，外层大圆和内层小圆组合后，刚好显示环形区域，完全不受系统深色模式的颜色修改影响。

方案2：基于透明度定义遮罩

如果坚持使用mask，可以将遮罩元素的颜色统一为黑色，通过opacity控制遮罩的显示/隐藏逻辑，避免Mail修改颜色：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
  <defs>
    <mask id="mask">
      <!-- 黑色矩形+完全不透明：显示下方图形 -->
      <rect x="0" y="0" width="256" height="256" fill="black" opacity="1" />
      <!-- 黑色圆形+完全透明：隐藏下方图形 -->
      <circle cx="128" cy="128" r="32" fill="black" opacity="0" />
    </mask>
  </defs>
  <circle mask="url(#mask)" cx="128" cy="128" r="64" fill="#ff0000" />
</svg>

遮罩的计算优先级中，透明度会优先于颜色亮度，即使Mail修改黑色为白色，透明度属性不会被篡改，因此遮罩逻辑保持正常。

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