SVG: Filter appearing on top of image

Question

I have an svg loader with a drop-shadow but for some reason the shadow appears on top of the image, effectively hiding it. Can someone point out where I'm going wrong?

<div class="loader">
  <div class="svg-favicon">
    <svg version="1.1" id="full_x5F_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="487.8 -92.9 467.7 372.9" style="enable-background:new 487.8 -92.9 467.7 372.9;" xml:space="preserve">
    <style type="text/css">
      .st0{fill:#FF002B;stroke:#000000;stroke-width:2;}
      .st1{fill:dodgerblue;stroke:#000000;stroke-width:2;}
      .st2{filter:url(#dropshadow);}
      .st3{stroke-dasharray: 1900;stroke-dashoffset:1900}
      /*.st3{stroke-dasharray: 1900;stroke-dashoffset:1900}*/
      .st4{stroke-dasharray: 900;stroke-dashoffset:900}
      /*.st4{stroke-dasharray: 900;stroke-dashoffset:900}*/
    </style>
    <filter height="130%" id="dropshadow">
      <fegaussianblur in="SourceAlpha" stddeviation="3">
      <feoffset result="offsetblur" dy="2" dx="0">
      <femerge>
        <femergenode>
        <femergenode in="SourceGraphic">
      </femergenode></femergenode></femerge>
    </feoffset></fegaussianblur></filter>
    <g>
      <g>
        <g>
          <path id="letter" class="st2 st0 st4" d="M576.4,217.7L687.8,3.5h72.5l104.8,214.2h-68.9l-18.9-43.4H660.8l-20,43.4H576.4z M680.7,132.9h77
            l-36.6-82.3L680.7,132.9z"/>
        </g>
      </g>
    </g>
    <path id="arc" class="st1 st3 st2" d="M911.6,267.7L911.6,267.7c19.8-35,36.3-74.4,39.4-117.9C960.1,22.9,849-78,723.2-78
      S495.4,24,495.4,149.8c0,21.8,3.1,43,8.9,63c0.3,0.9-0.4,1.8-1.4,1.8h-11c-1.3,0-1.9,1.5-1,2.5l44.9,46.8c0.6,0.7,1.2,1.3,1.6,1.7
      c0.3,0.3,0.6,0.6,0.8,0.6c-0.8-1.5-1.6-3.1-2.3-4.6c-2.5-5.9-7.3-17.2-11.2-27.5c-6.7-20.5-10.3-42.4-10.3-65.2
      c0-128.4,114.7-230,247.3-207.8c87.7,14.7,156.8,83.8,171.4,171.5C941.4,181.8,932.6,228.4,911.6,267.7z"/>
    </svg>
  </div>
</div>

Here's a jsFiddle showing what I mean. If you remove the st2 class, you can see the actual colors.

Answer 1

I did some research on your code. There is a problem in your dropshadowfilter markup. Please correct your filter markup. Here is the fiddle: https://jsfiddle.net/ejhs2ex8/

   <filter height="130%" id="dropshadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur>
      <feOffset result="offsetblur" dy="2" dx="0"></feOffset>
      <feMerge>
          <feMergeNode></feMergeNode>
          <feMergeNode in="SourceGraphic">
      </feMergeNode></feMerge>
   </filter>