SVG dropshadow getting clipped

Question

I have an SVG tick icon with a dropshadow that is being clipped. The usual filter offset method I've seen here on SO isn't helping. Any suggestions?

<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="73.516px" height="55.507px" viewBox="0 0 73.516 55.507" xml:space="preserve">

  <filter id="dropShadow" x="-20%" y="-20%" width="200%" height="200%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
    <feOffset dx="0" dy="0" />
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <polygon fill="#F2F2F2" points="61.769,0 29.784,31.987 11.765,13.96 0,25.69 18.034,43.735 18.011,43.761 29.748,55.507 
    73.516,11.75 " filter="url(#dropShadow)"/>

</svg>

I generated this with Adobe Illustrator and then added the drop shadow via code.

Thanks!

Answer 1

Expanding the filter region won't help paint outside the SVG viewbox. Right now, your check mark paints right to the edge of the viewbox, so the drop shadow gets cut off by the viewbox, not the filter region. Increase the size of your viewbox and the world will be good.

Answer 2

Setting the CSS for the SVG to overflow:visible worked for me.