具有多个svg的CSS或SVG蒙版剪辑背景

Question

所以问题是：如何用多个svgs做一个div背景的css剪贴蒙版？

我有一个循环的视频背景。在视频的顶部，我有一个黑色背景的div作为半透明叠加。

这个背景我想做8个不同svgs的遮罩剪辑，所以图标会剪掉黑色背景。

如何做到这一点？我尝试使用svg掩码并使用css3剪辑路径，但我无法弄清楚使用多个svgs正确执行此操作？

更新：这是我到目前为止所尝试的内容：https://jsfiddle.net/w1ft4jm1/

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920px" height="1080px" preserveAspectRatio="xMidYMid slice" style="z-index: 6;">
<path transform="translate(820,350) scale(1.2)" id="XMLID_164_" class="st0" d="M153,48.4h21.8v87.7c0,33.3-27,60.3-60.3,60.3c-33.3,0-60.3-27-60.3-60.3V48.4H76v87.7
  c0,21.1,17.4,38.5,38.5,38.5c21.1,0,38.5-17.4,38.5-38.5V48.4z" fill="blue" stroke="blue" style="-webkit-filter: blur(10px); opacity: .5;"/>
<path transform="translate(820,350) scale(1.2)" id="XMLID_162_" fill="blue" stroke="blue" style="-webkit-filter: blur(10px); opacity: .5;" class="st0" d="M196.6,106h21.8v29.7c0,33.3-21.8,104.3-103.9,104.3S9.7,173.5,9.7,135.7V7.1h21.8
  c0,0,0,80,0,128.6c0,42.5,32.4,82.5,82.9,82.5s82.1-40,82.1-82.5C196.6,137.1,196.6,106,196.6,106z"/>

<defs>
  <mask id="mask" x="0" y="0" width="100%" height="100%" >
    <rect x="0" y="0" width="100%" height="100%"/>
    <path transform="translate(820,350) scale(1.2)" id="XMLID_164_" class="st0" d="M153,48.4h21.8v87.7c0,33.3-27,60.3-60.3,60.3c-33.3,0-60.3-27-60.3-60.3V48.4H76v87.7
      c0,21.1,17.4,38.5,38.5,38.5c21.1,0,38.5-17.4,38.5-38.5V48.4z" stroke="blue"/>
    <path transform="translate(820,350) scale(1.2)" id="XMLID_162_" class="st0" d="M196.6,106h21.8v29.7c0,33.3-21.8,104.3-103.9,104.3S9.7,173.5,9.7,135.7V7.1h21.8
      c0,0,0,80,0,128.6c0,42.5,32.4,82.5,82.9,82.5s82.1-40,82.1-82.5C196.6,137.1,196.6,106,196.6,106z"/>
    </mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="opacity:.8;"/>

问题是，我需要有多个剪裁黑色背景的svg图标。如果我将所有内容都作为SVG掩码进行操作，我将会遇到问题以使其响应。

你认为最好的前进方向是什么？谢谢！