具有多个视频源的 SVG 蒙版？

【问题标题】：SVG Mask with Multiple Video sources?具有多个视频源的 SVG 蒙版？
【发布时间】：2019-02-26 05:13:52
【问题描述】：

不确定这是否可行，但我正在尝试查看是否可以为不同的视频 DOM 元素设置一个 SVG 圆形遮罩，这些元素都将被修复。

理想情况下，上面的每个 SVG 圆圈都会屏蔽位于不同图层中的视频。然后我会将圆圈转换为按比例放大以适应浏览器的高度/宽度

我已经尝试了所有不同的代码示例，因此将代码放在这里不会有任何区别，只是寻找一个方向，看看这在技术上是否可行，并让我朝着正确的方向前进

【问题讨论】：

【解决方案1】：

如果我理解你的话，你可以使用clip-path，就像这样：

video {
  width: 320px;
  height: 240px;
  clip-path: circle(20%);
}

video.full {
  width: 100%;
  height: 100%;
  clip-path: none;
}

.hide {
  display: none;
}

https://jsfiddle.net/deaxfcbk/

打开上面链接的示例并单击一个视频，它将填充结果区域并保持其比例，而其他视频将被隐藏。如果你再次点击它会变成一个圆圈。

您可以添加任意数量的视频、隐藏控件、全屏播放等。

希望有帮助:)

【讨论】：