SVG蒙版无法在Firefox中裁剪

Question

我有一个由两个点组成的svg面罩，可以从矩形中切出两个孔。这种效果在webkit浏览器中效果很好，但是在firefox中，我只是得到了一个实心矩形。 Firefox旨在支持svg mask-我有什么地方出错了吗？

body {background:pink}
#overlay {
  position: relative;
  z-index: 99;
  position: absolute;
  width: 50vw;
  height: 100vh;
}

svg { position:absolute;width: 100%;height:100%}

<div id="overlay">

  <svg>

      <mask id="mymask" >
        <rect class="svg-bg" x="0" y="0" width="100%" height="100%" fill="white"/>
        <circle id="hole-1" cx="50%" cy="37vh" r="12vh" fill="#000000"/>
        <circle id="hole-2" cx="50%" cy="63vh" r="12vh" fill="#000000"/>
      </mask>

    <rect id="hole-bg" x="0" y="0" width="100%" height="100%"  mask="url(#mymask)"/>

  </svg>

</div>