Search code examples
svgsvg-filters

svg blur filter to create outer glow not working

I'm struggling to create an outer glow on an svg <rect> element. I have a top <rect> that's white, and below it, I want to apply a <feGaussianBlur> to a blue <rect> so that the top white <rect> has the appearance that it is glowing blue. I've been unable to get the blur to render. What am I missing?

<svg version="1.1" id="takeaway" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 432 2663.8" xml:space="preserve">      
  <style><![CDATA[
     .card {fill:#fff;}
     .card_glowSource{fill:#3361bd;filter:url(#cardGlowSource);}
    ]]></style>
  <defs>
     <filter id="cardGlowSouce" x="0" y="0" width="375" height="140">
          <feGaussianBlur stdDeviation="3" in="SourceGraphic"/>
     </filter>     
</defs>
  <g id="glowRect" transform="matrix(1,0,0,1,30,190)">
    <rect class="card_glowSource" x="0" y="0" width="375" height="140" rx="5" ry="5"/>	
	<rect class="card" x="0" y="0" width="375" height="140" rx="5" ry="5"/>
</g>
</svg>

Solution

  • You have two issues:

    1. There's a typo in your filter name. "cardGlowSouce" should be "cardGlowSource".
    2. You will need to remove the x, y, width and height attributes from your <filter> element if you want the filter to work correctly.