SVG内<video>元素溢出foreignObject容器及Chrome控件失效问题求助

我之前也踩过Chrome里SVG foreignObject嵌套video的这个兼容性坑，给你几个亲测有效的解决思路：

1. 用CSS Transform强制匹配缩放 #

Chrome对foreignObject内video的尺寸计算存在偏差，我们可以手动通过transform来对齐SVG的缩放比例，同时修正宽高和原点：

/* 假设SVG的缩放比例为0.8，根据实际情况调整 */
foreignObject video {
  transform: scale(0.8);
  transform-origin: 0 0; /* 以左上角为缩放原点，避免偏移 */
  width: 125%; /* 1/0.8=125%，确保缩放后填满容器 */
  height: 125%;
  pointer-events: auto; /* 强制开启鼠标交互，解决控件点不了的问题 */
}

如果SVG是动态缩放的，可以通过JS实时计算缩放比例，再动态设置transform的值。

2. 监听尺寸变化，动态设置Video宽高 #

通过JS获取foreignObject的实际显示尺寸，直接赋值给video，绕开Chrome的尺寸继承问题：

const foreignObj = document.querySelector('foreignObject');
const video = foreignObj.querySelector('video');

// 更新video尺寸的函数
function syncVideoSize() {
  const objRect = foreignObj.getBoundingClientRect();
  video.style.width = `${objRect.width}px`;
  video.style.height = `${objRect.height}px`;
}

// 初始化时同步尺寸
syncVideoSize();
// 监听窗口 resize 事件，实时更新
window.addEventListener('resize', syncVideoSize);
// 如果SVG有动态缩放逻辑，也要在缩放后调用syncVideoSize

同样记得加上pointer-events: auto来确保控件可以交互。

3. 绕开foreignObject，改用外部定位 #

如果布局允许，可以把video放在SVG外部，用绝对定位配合SVG的位置和缩放值来对齐，彻底避开foreignObject的兼容性问题：

svg {
  position: relative;
}
.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 避免遮挡SVG其他元素 */
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  pointer-events: auto; /* 恢复video的交互 */
}

这种方式的兼容性最好，缺点是需要调整原有布局结构。

Chrome对SVG foreignObject内的媒体元素支持确实不如Firefox完善，这是浏览器内核实现的差异导致的。上面的方法应该能解决你遇到的缩放和交互问题。

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