Drawing a circle with a dropshadow in SVG clips the edges

Question

I'm trying to draw a simple circle with a drop shadow in SVG, but for some reason the top and left edges are clipped. This happens both in Chrome and Safari.

I'm using code I found in the w3schools tutorial SVG Drop Shadows, modified to use a circle instead.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" />
</svg>

I tried moving the circle around, increasing the SVG container's size, etc. but got the same result. I also tried Googling various dropshadow tutorials and always modifying the example code to use a circle. Same result every time.

So how do I draw a simple circle with a dropshadow in SVG?

Answer 1

Turns out the problem lies in the offset of the filter. The circle doesn't have enough padding around it to accomodate the newly added filter. To add this, use the following attributes (adjust as needed):

<filter id="f1" x="-20%" y="-20%" width="200%" height="200%">

The x and y place the box for the filter up and to the left some, which is what was missing previously. The width and height then specify the box size. In this case 200% is overkill, but it may be necessary for larger shadows.

Answer 2

Replace this: <filter id="f1" x="0" y="0" width="200%" height="200%">

To this: <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

See example: http://jsfiddle.net/sRfck/1/