外部投影在复杂的SVG [jVectorMap国家]

Question

我在jVectorMap的一些国家添加了投影。

投影滤镜:

<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>

例子:CodePen

大国看起来不错。但问题出在小国身上。对于小国，阴影在边界周围形成一个正方形(放大像科索沃和奥兰这样的国家)。

我怎样才能去掉那个正方形，使它看起来像其他大国?

Answer 1

展开你的过滤器区域，你就可以了:

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