Outer drop shadow in complex SVG [jVectorMap Countries]

Question

I have added drop shadow in some countries of jVectorMap.

Filter used for drop shadow:

<svg>
  <defs>
    <filter id="f2" x="0" y="0">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
      <feGaussianBlur result="blurOut" in="SourceGraphic" stdDeviation="4"/>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>

    <filter id = "i1">
      <feOffset result="offOut" in="SourceGraphic" dx = "0" dy = "0"/>
      <feColorMatrix result="matrixOut" in="offOut" type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="4"/>
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
    </filter>
  </defs>
</svg>

Example: CodePen

It looks fine for big countries. But the problem is for small countries. For small countries, the shadow is creating a square shape around the border (zoom in for countries like Kosovo and Aland in the example).

How can I remove that square shape to make it looks alike other big countries?

Answer 1

Expand your filter region and you'll be fine:

<filter id = "i1" x="-40%" y="-40%" width="180%" height="180%">

does it for me.