SVG GaussianBlur质量

Question

我正在显示一张SVG地图，其中的海岸线是用模糊效果绘制的，如下图所示：

​

​

我使用一个简单的feGaussianBlur过滤器来绘制陆地多边形下面的海岸线：

<filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4">
</feGaussianBlur></filter>

在北海岸取得了令人满意的结果。但是，一些矩形图案会出现在红色的圆圈中。这是由于海岸被分割成几个线性元素，它们模糊的边缘相交。

有没有办法解决这个问题，并且在任何地方都有一个“漂亮”的模糊效果？

我已经尝试了color-interpolation-filters=sRGB和image-rendering=optimizeQuality，但都没有成功。

仅供参考，演示地图是带有the source code的here。

Answer 1

不知何故，我认为这是因为过滤器的尺寸，延长的部分被削减。尝试扩展这些边界：

<filter id="degenCodeNeon" x="-50%" y="-50%" width="200%" height="200%">

百分比使用objectBoundingBox，您也可以指定userSpaceOnUse。但先试试这个吧。

尝试使用x，y -250%和宽/高600%，似乎可以工作。我建议添加颜色矩阵或分量转移滤镜，以完全将alpha降低到低于某个阈值的0。