SVG视频遮罩在Safari浏览器中无法显示的问题求助

针对你遇到的SVG遮罩在Safari中失效的问题，可通过以下几个关键调整解决：

核心修复点 #

1. 调整SVG的作用域与显示方式
   Safari对独立于内容流的SVG处理存在兼容性问题，需将SVG嵌入到被遮罩元素的父容器内，同时设置width:0; height:0隐藏SVG本身，确保定义的clipPath能被正确识别。

2. 优化clipPath的坐标系统
   移除clipPathUnits="objectBoundingBox"，改用默认的userSpaceOnUse坐标系，避免Safari在计算视频元素边界盒时出现偏差。

3. 简化容器与元素的样式
   修正父容器的定位属性，简化视频容器的尺寸设置，减少Safari样式计算的冲突。

修改后的完整代码 #

CSS部分 #

.parent_videologo_container {
    width: 100%;
    position: relative; /* 确保子元素绝对定位参考父容器 */
}

.videologo {
    clip-path: url(#videologomask);
    -webkit-clip-path: url(#videologomask);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.videologo_container {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0; 
    width: 100%;
    height: 100%;
    opacity: 0.3;
    overflow: hidden; /* 确保裁剪内容不溢出 */
}

.parent_videologo_container img {
    position:absolute;
    top: 8.5%;
    left: 4.5%;
    width: 55%;
    -webkit-filter: drop-shadow(0px 0px 40px #000000);
    filter: drop-shadow(0px 0px 40px #000000);
    z-index: 100;
}

HTML部分 #

<div class="parent_videologo_container">
    <img src="https://static1.squarespace.com/static/61ae7bac2fe6511670e0d1d8/t/65f1cf711fea292ed70a3160/1710346097599/Method%2BLogo%2BPrimary_NoTagline.png" />
    <div class="videologo_container">
        <video class="videologo" autoplay playsinline muted loop src="https://static1.squarespace.com/static/61ae7bac2fe6511670e0d1d8/t/6602cf3d75fd305fdcbdcaca/1711460158389/BGVideoV2.mp4" type="video/mp4">
        </video>
    </div>
    <!-- 将SVG嵌入父容器内，隐藏自身但保留clipPath定义 -->
    <svg viewBox="0 0 1 1" width="0" height="0" preserveAspectRatio="none">
        <defs>
            <clipPath id="videologomask">
                <path d="M.048645,0c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021912-.048645-.048645-.048645H.048645ZM.405151,0c-.026794,0-.048645.021912-.048645.048645v.189758c0,.026733.021851.048645.048645.048645h.189697c.026794,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021851-.048645-.048645-.048645h-.189697ZM.951355,0h-.189758c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645V.048645c0-.026733-.021912-.048645-.048645-.048645ZM.048645.356506c-.026733,0-.048645.021851-.048645.048645v.189697c0,.026794.021912.048645.048645.048645h.189758c.026733,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021912-.048645-.048645-.048645H.048645ZM.405151.356506c-.026794,0-.048645.021851-.048645.048645v.189697c0,.026794.021851.048645.048645.048645h.189697c.026794,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021851-.048645-.048645-.048645h-.189697ZM.761597.356506c-.026733,0-.048645.021851-.048645.048645v.189697c0,.026794.021912.048645.048645.048645h.189758c.026733,0,.048645-.021851.048645-.048645v-.189697c0-.026794-.021912-.048645-.048645-.048645h-.189758ZM.048645.712952c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021912-.048645-.048645-.048645,0,0-.189758,0-.189758,0ZM.405151.712952c-.026794,0-.048645.021912-.048645.048645v.189758c0,.026733.021851.048645.048645.048645h.189697c.026794,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021851-.048645-.048645-.048645,0,0-.189697,0-.189697,0ZM.761597.712952c-.026733,0-.048645.021912-.048645.048645v.189758c0,.026733.021912.048645.048645.048645h.189758c.026733,0,.048645-.021912.048645-.048645v-.189758c0-.026733-.021912-.048645-.048645-.048645,0,0-.189758,0-.189758,0Z" />
            </clipPath>
        </defs>
    </svg>
</div>

修复说明 #

• 父容器添加position: relative，解决Safari中绝对定位元素的参考基准问题。
• SVG嵌入父容器并设置宽高为0，确保clipPath的作用域与被遮罩元素一致，避免Safari无法解析外部SVG定义的裁剪路径。
• 移除clipPathUnits属性，使用默认坐标系减少计算误差，适配Safari的裁剪路径解析逻辑。
• 简化视频容器的尺寸设置，确保容器与父容器完全匹配，避免裁剪区域错位。

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