title: How to have a drop shadow on a transparent rect svg
body: <p>I want to have a drop shadow on a transparent SVG element.</p>
  
  <p>I have tried using all different kinds of filters but to no avail. css3 filters on the svg element(<code>filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));</code>), the new dropshadow filter(<code>&lt;feDropShadow&gt;</code>), the old filters:</p>
  
  <pre><code>&lt;filter xmlns="http://www.w3.org/2000/svg" id="dropshadow" height="130%"&gt;
        &lt;feGaussianBlur in="SourceAlpha" stdDeviation="3"/&gt; 
        &lt;feOffset dx="2" dy="2" result="offsetblur"/&gt;
        &lt;feComponentTransfer&gt;
          &lt;feFuncA type="linear" slope="0.2"/&gt;
        &lt;/feComponentTransfer&gt;
        &lt;feMerge&gt; 
          &lt;feMergeNode/&gt;
          &lt;feMergeNode in="SourceGraphic"/&gt; 
        &lt;/feMerge&gt;
      &lt;/filter&gt;
  </code></pre>
  
  <p>This can be achieved using css3 box-shadow
  <a href="https://codepen.io/villagelukaschen/pen/KEEavR" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>I expect to have a dropshadow on a transparent element but the actual transparent element clips over the dropshadow(so the element itself is transparent, but has an neon like outer glow)</p>
  
  <p>I want to be able to control:</p>
  
  <ul>
  <li>blur</li>
  <li>spread</li>
  <li>color</li>
  </ul>
  
  <p>Any help will be appreciated :)</p>