复杂 SVG 中的外部阴影 [jVectorMap Countries]

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>

Example: CodePen

对于大国来说，这看起来不错。但问题在于小国。 对于小国，阴影在边界周围形成一个正方形（在示例中放大科索沃和奥兰等国家）。

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

Answer 1

扩大你的过滤区域，你会没事的：

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

适合我。

复杂 SVG 中的外部阴影 [jVectorMap Countries]

Outer drop shadow in complex SVG [jVectorMap Countries]

css

svg

dropshadow

jvectormap

svg-filters