SVG foreignObject在Safari中显示异常，求适配解决方案

针对你遇到的SVG foreignObject在Safari中无法正常显示，且clip-path修复效果不达预期的问题，提供以下几个可行的适配方案：

方案1：用SVG mask替代foreignObject #

Safari对SVG mask的支持远优于foreignObject，直接通过mask给video做裁剪，绕开foreignObject的兼容性坑：

<svg width="600" height="400" viewBox="0 0 600 400">
  <defs>
    <!-- 定义裁剪形状，这里以圆角矩形为例，替换成你需要的路径/图形 -->
    <mask id="video-clip-mask">
      <rect x="50" y="50" width="500" height="300" rx="20" fill="white" />
    </mask>
  </defs>
  <!-- 将video作为SVG子元素，直接应用mask -->
  <video width="600" height="400" mask="url(#video-clip-mask)" controls>
    <source src="your-video.mp4" type="video/mp4" />
  </video>
</svg>

方案2：修复foreignObject的Safari适配问题 #

如果必须保留foreignObject，需满足以下几个关键配置：

• 给foreignObject指定明确的x/y/width/height属性
• 内部XHTML元素必须声明命名空间xmlns="http://www.w3.org/1999/xhtml"
• 同时给foreignObject和内部容器添加overflow: hidden
• 给video设置width:100%; height:100%; object-fit: cover

示例代码：

<svg width="600" height="400" viewBox="0 0 600 400">
  <foreignObject x="50" y="50" width="500" height="300" style="overflow: hidden;">
    <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%; border-radius:20px; overflow:hidden;">
      <video style="width:100%; height:100%; object-fit:cover;" controls>
        <source src="your-video.mp4" type="video/mp4" />
      </video>
    </div>
  </foreignObject>
</svg>

方案3：放弃SVG嵌套，用纯HTML+CSS实现 #

如果SVG不是必须的，直接用HTML容器配合CSS clip-path/overflow实现，适配性更稳定：

<div class="video-wrapper">
  <video controls>
    <source src="your-video.mp4" type="video/mp4" />
  </video>
</div>

<style>
.video-wrapper {
  width: 500px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  /* Safari兼容前缀 */
  -webkit-clip-path: inset(0 round 20px);
  clip-path: inset(0 round 20px);
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

额外排查点 #

• 确保Safari版本为15及以上，旧版本foreignObject的兼容性问题更严重
• 视频文件格式需为Safari支持的MP4（H.264编码），避免因格式不支持导致的显示异常

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