将掩码应用于html元素跨浏览器

Question

我正在尝试在与所有浏览器兼容的html元素上获取掩码的应用程序。目前只适用于Firefox。怎么了？

<svg class="svg-defs" width="10" height="10" baseProfile="full" version="1.2">
   <defs>
      <mask id="mask">
         <circle cx="100" cy="100" r="50" stroke="white" stroke-width="1" fill="none"></circle>
      </mask>
   </defs>
</svg>

<div></div>

div {
    -webkit-mask:url(#mask);
    -moz-mask:url(#mask);
    -o-mask:url(#mask);
    -ms-mask:url(#mask);
    mask:url(#mask);

    height:200px;
    width:200px; 
    background:red;
}

https://jsfiddle.net/phanorat/u1gc89y6/3/