title: SVG path drop shadow effects
body: <p>I have a few SVG objects in a group. It is a curve with an "X" in the middle of it. I would like to make it look a little nicer and have a drop shadow behind it. I know I can't just CSS and will have to use a filter. </p>
  
  <p>The problem I'm having is getting this drop shadow to be a circle since I believe the path was made as a square. I thought about overlaying an ellipse and just making the fill none, but I wanted to know if there is a better way. </p>
  
  <p><strong>Picture of what it looks like</strong></p>
  
  <p><a href="https://i.stack.imgur.com/VqtTg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VqtTg.jpg" alt="what it looks like"></a></p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;g class="link" data-link_id="1"&gt;
  
    &lt;path stroke-width="5" fill="none" d="M1732,610.0000305175781 C1832,610.0000305175781 1760.0000610351562,710.0000305175781 1861.0000610351562,710.0000305175781" stroke="#000000"&gt;&lt;/path&gt;
  
    &lt;rect stroke="none" mask="url(#fc_mask_0_1)" x="1860.0000610351562" y="707.5000305175781" width="21" height="5" fill="#000000"&gt;&lt;/rect&gt;
  
    &lt;defs&gt;
      &lt;filter id="f1" x="0" y="0"&gt;
        &lt;feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5"&gt;&lt;/feOffset&gt; 
        &lt;feGaussianBlur result="blurOut" in="offOut" stdDeviation="1"&gt;&lt;/feGaussianBlur&gt;
        &lt;feBlend in="SourceGraphic" in2="blurOut" mode="normal"&gt;&lt;/feBlend&gt;
      &lt;/filter&gt;
    &lt;/defs&gt;
  
    &lt;path stroke-width="5" fill="red" class="delete_link" filter="url(#f1)" transform="translate(1796.209228515625,660.2947998046875)" width="5" height="5" d="m10.84806,-5.81639c-1.08944,-1.8664 -2.56719,-3.34415 -4.43364,-4.43353c-1.86679,-1.08933 -3.90465,-1.63388 -6.11514,-1.63388c-2.21027,0 -4.24874,0.54455 -6.11519,1.63388c-1.86657,1.08921 -3.34432,2.56697 -4.43375,4.43353c-1.08949,1.86668 -1.63404,3.90515 -1.63404,6.11525c0,2.21021 0.54472,4.24835 1.63388,6.11514c1.08938,1.8664 2.56713,3.34415 4.4337,4.43364c1.86668,1.08927 3.90498,1.63388 6.11519,1.63388s4.24874,-0.54461 6.1153,-1.63388c1.86645,-1.0891 3.34415,-2.56724 4.43348,-4.43364c1.08916,-1.86662 1.63365,-3.90504 1.63365,-6.11514c0.00006,-2.21032 -0.5445,-4.24885 -1.63343,-6.11525zm-4.80668,8.98619c0.20096,0.20074 0.30158,0.43921 0.30158,0.71418c0,0.28519 -0.10062,0.52861 -0.30158,0.72935l-1.42752,1.42797c-0.2008,0.20074 -0.44415,0.30114 -0.72979,0.30114c-0.27491,0 -0.51316,-0.1004 -0.71379,-0.30114l-2.87116,-2.87149l-2.87127,2.87149c-0.20091,0.20074 -0.43882,0.30114 -0.71379,0.30114c-0.28558,0 -0.52877,-0.1004 -0.72974,-0.30114l-1.42775,-1.42797c-0.20091,-0.20074 -0.30136,-0.44415 -0.30136,-0.72935c0,-0.27491 0.10051,-0.51338 0.30136,-0.71418l2.87127,-2.87099l-2.87127,-2.87127c-0.20091,-0.20069 -0.30136,-0.43882 -0.30136,-0.71379c0,-0.28558 0.10051,-0.52877 0.30136,-0.72974l1.42775,-1.42752c0.20096,-0.20091 0.44415,-0.30136 0.72974,-0.30136c0.27497,0 0.51288,0.10051 0.71379,0.30136l2.87127,2.87105l2.87116,-2.87105c0.20057,-0.20091 0.43882,-0.30136 0.71379,-0.30136c0.28564,0 0.52899,0.10051 0.72979,0.30136l1.42752,1.42752c0.20096,0.20096 0.30158,0.44415 0.30158,0.72974c0,0.27491 -0.10062,0.5131 -0.30158,0.71379l-2.87111,2.87127l2.87111,2.87099z"&gt;&lt;/path&gt;
  &lt;/g&gt;
  </code></pre>