title: interacting through svg-mask not possible
body: <p>I want to cover my whole website despite a small circle that follows the cursor. So I made a svg with a circle-mask that updates it's position via jquery. But now all my elements below are not clickable, because the svg lays in front of them. Is there a solution how to solve this?</p>
  <pre><code>&lt;svg viewbox=&quot;0 0 100 50&quot; width=&quot;500%&quot; height=&quot;500%&quot; id=&quot;mouseoverlay&quot; class=&quot;mouseoverlay&quot; style=&quot;position:fixed;&quot;&gt;
  &lt;defs&gt;
      &lt;filter id=&quot;gauss&quot;&gt;
          &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;0.4&quot;/&gt;
      &lt;/filter&gt;
      &lt;mask id=&quot;mask&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;30&quot;&gt;
        &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;100&quot; fill=&quot;#fff&quot;/&gt;
       &lt;circle cx=&quot;50&quot; cy=&quot;25&quot; r=&quot;4.5&quot; filter=&quot;url(#gauss)&quot; /&gt;
      &lt;/mask&gt;
  &lt;/defs&gt;
  &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;100&quot; mask=&quot;url(#mask)&quot; fill=&quot;#bbb&quot; fill-opacity=&quot;1&quot;/&gt;    
  </code></pre>
  
  <pre><code>$(document).mousemove(function (e) {
          var bodyOffsets = document.body.getBoundingClientRect();
          var fensterhoehe = window.innerHeight;
          var fensterbreite = window.innerWidth;
          tempX = e.pageX - (fensterbreite*2.5);
          tempY = e.pageY - (fensterhoehe*2.5);
          $('#mouseoverlay').css({'top':(tempY - scrollY),'left':tempX}).fadeIn(&quot;3000&quot;);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/DjSJD.jpg" rel="nofollow noreferrer">circle mask</a></p>