基础亮度遮罩（Luminance Mask）在Safari中失效的技术求助

我要实现一个全屏加载遮罩，一段时间后在页面中心剪出矩形区域显示下方内容。原本采用SVG亮度遮罩方案：先画全屏白色矩形，再叠加中心黑色矩形作为裁剪区。这个方案在Chrome和Firefox中正常生效，能透出下方红色背景，但在Mac的Safari 17.6里完全失效，只显示黑色。尝试过设置mask-mode: luminance和各种-webkit-mask-composite组合，均无效果。

解决方法：换用Alpha模式遮罩或裁剪路径 #

方案1：Alpha模式反向遮罩

Safari对亮度模式（luminance）的遮罩叠加逻辑支持存在兼容性问题，改用Alpha模式并反转遮罩颜色逻辑即可解决：

<svg width="100%" height="100%" class="loader-masker">
    <mask id="loaderOverlay" mask-mode="alpha">
        <!-- 黑色全屏：默认遮挡下方内容 -->
        <rect fill="black" width="100%" height="100%"/>
        <!-- 白色中心矩形：允许显示下方内容，用transform让矩形真正居中 -->
        <rect fill="white" x="50%" y="50%" width="50%" height="10%" transform="translate(-25%, -5%)"/>
    </mask>
    <!-- 将遮罩应用到模拟页面背景的矩形上，实际项目中可替换为页面容器 -->
    <rect fill="red" width="100%" height="100%" mask="url(#loaderOverlay)"/>
</svg>

方案2：用clipPath直接定义显示区域

如果不需要渐变遮罩效果，直接使用裁剪路径更简单，兼容性也更广泛：

<svg width="100%" height="100%" class="loader-masker">
    <clipPath id="loaderClip">
        <!-- 直接定义要显示的中心矩形区域 -->
        <rect x="25%" y="45%" width="50%" height="10%"/>
    </clipPath>
    <!-- 全屏黑色遮罩，仅显示裁剪路径内的部分 -->
    <rect fill="black" width="100%" height="100%" clip-path="url(#loaderClip)"/>
    <!-- 页面背景 -->
    <rect fill="red" width="100%" height="100%"/>
</svg>

原因说明 #

• Safari 17.6对SVG luminance遮罩的多图形合成逻辑处理异常，导致原本的亮度遮罩完全失效。
• Alpha模式遮罩逻辑更直观：黑色区域完全遮挡内容，白色区域完全透出内容，各浏览器兼容性更一致。
• 原代码中的中心矩形位置需要调整：x="50%" y="50%"会让矩形左上角位于页面中心，添加transform才能让矩形整体居中显示。

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