使用clip-path的视频在Safari浏览器中无法显示的问题求助

这个问题我之前在项目里碰到过！Safari对SVG clip-path的处理确实有几个容易踩的坑，结合你的代码来看，咱们一步步拆解原因和解决方案：

问题成因分析 #

从你的代码和现象来看，核心问题出在SVG的viewBox属性无效以及Safari对裁剪区域的严格计算逻辑：

1. 你第一个SVG里的viewBox="0 0 A B"是占位符，不是实际的尺寸数值，Safari无法基于这个无效的viewBox计算裁剪区域的范围，直接把视频整个裁掉了；
2. 另外，Safari对无可视内容的SVG（仅包含clipPath的SVG）的渲染上下文要求更严格，可能会因为SVG本身未正确渲染而导致clip-path失效。

具体解决方案 #

1. 修复SVG的viewBox为实际尺寸 #

观察你clipPath里的polygon坐标，最大的x值是1851.2，最大的y值是1997.3，所以需要把SVG的viewBox设置为匹配的数值，让Safari能正确识别裁剪区域：

<svg viewBox="0 0 1851.2 1997.3" width="0" height="0" overflow="hidden">
  <clipPath id="svgTextPath">
    <polygon class="st0" points="243.1,1997.3 0,0 1851.2,0 1851.2,1997.3 "/>
  </clipPath>
</svg>

这里把width和height设为0，overflow:hidden，确保SVG不占据页面空间，但保留渲染上下文。

2. 优化CSS中的clip-path写法 #

虽然你已经加了-webkit-clip-path，但可以调整顺序并简化，确保Safari能正确识别：

.svg-clipped-text {
  clip-path: url(#svgTextPath);
  -webkit-clip-path: url(#svgTextPath); /* 前缀放在标准属性后，兼容旧版本Safari */
}

3. 验证视频容器的定位兼容性 #

你的.video-container用了margin-left:54vw，在Safari中vw单位的计算是正常的，但可以调整为更精准的定位方式：

.video-container {
  position: absolute;
  left: 54vw; /* 用left代替margin-left，避免margin带来的潜在布局冲突 */
  top: 0;
  height: 100vh;
  width: 46vw;
  overflow: hidden; /* 确保视频不会超出容器 */
}
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

测试验证 #

完成以上修改后，刷新Safari应该就能看到被裁剪后的视频了。如果还是有问题，可以尝试：

• 检查SVG的命名空间是否完整（你的代码里已经加了，没问题）；
• 确保clipPath的id在页面中唯一；
• 暂时移除其他可能干扰的CSS属性（比如.border-container的定位），逐步排查。

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