title: apply mask to html element cross-browser
body: <p>I'm trying to obtain the application of a mask on html elements compatible with all browsers. At the moment only it works on Firefox. What's wrong?</p>
  
  <pre><code>&lt;svg class="svg-defs" width="10" height="10" baseProfile="full" version="1.2"&gt;
     &lt;defs&gt;
        &lt;mask id="mask"&gt;
           &lt;circle cx="100" cy="100" r="50" stroke="white" stroke-width="1" fill="none"&gt;&lt;/circle&gt;
        &lt;/mask&gt;
     &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;div&gt;&lt;/div&gt;
  
  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;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/phanorat/u1gc89y6/3/" rel="nofollow noreferrer">https://jsfiddle.net/phanorat/u1gc89y6/3/</a></p>