SVG 高斯模糊质量
SVG GaussianBlur quality
我正在展示一张 SVG 地图，其中绘制的海岸线具有模糊效果，如下图所示：
我正在使用一个简单的 feGaussianBlur 过滤器在陆地多边形下方绘制海岸线：
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4">
</feGaussianBlur></filter>
北海岸的结果令人满意。但是，一些矩形图案出现在红色圆圈中。这是由于将海岸分割成几个线性元素，其模糊边缘相交。
有没有办法解决这个问题并使到处都是 'nice' 模糊效果？
我已经尝试了 color-interpolation-filters=sRGB 和 image-rendering=optimizeQuality 但没有成功。
仅供参考，演示地图是 here with the source code。
不知何故，我认为这是因为过滤器的尺寸，扩展部分被剪掉了。尝试扩展这些边界：
<filter id="degenCodeNeon" x="-50%" y="-50%" width="200%" height="200%">
百分比使用objectBoundingBox，你也可以指定userSpaceOnUse。但先试试这个。
尝试了 x,y -250% 和 width/height 600%，似乎可行。我建议添加颜色矩阵或组件传输过滤器作为补充，以将 alpha 完全降低到 0，低于某个阈值。
我正在展示一张 SVG 地图，其中绘制的海岸线具有模糊效果，如下图所示：
我正在使用一个简单的 feGaussianBlur 过滤器在陆地多边形下方绘制海岸线：
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4">
</feGaussianBlur></filter>
北海岸的结果令人满意。但是，一些矩形图案出现在红色圆圈中。这是由于将海岸分割成几个线性元素，其模糊边缘相交。
有没有办法解决这个问题并使到处都是 'nice' 模糊效果？
我已经尝试了 color-interpolation-filters=sRGB 和 image-rendering=optimizeQuality 但没有成功。
仅供参考，演示地图是 here with the source code。
不知何故，我认为这是因为过滤器的尺寸，扩展部分被剪掉了。尝试扩展这些边界：
<filter id="degenCodeNeon" x="-50%" y="-50%" width="200%" height="200%">
百分比使用objectBoundingBox，你也可以指定userSpaceOnUse。但先试试这个。
尝试了 x,y -250% 和 width/height 600%，似乎可行。我建议添加颜色矩阵或组件传输过滤器作为补充，以将 alpha 完全降低到 0，低于某个阈值。