d3.js - SVG 高斯模糊质量

Question

我正在显示一个 SVG 地图，其海岸线具有模糊效果，如下图所示：

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

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

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

有没有办法解决这个问题并在各处产生“不错”的模糊效果？

我已经尝试过color-interpolation-filters=sRGB，image-rendering=optimizeQuality但没有任何成功。

仅供参考，演示地图与源代码在这里。

标签： d3.jssvggraphicshtml-renderinggaussianblur

Answer 1

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

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

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

尝试使用 x,y -250% 和宽度/高度 600%，似乎有效。我建议添加颜色矩阵或组件传输过滤器作为补充，以将 alpha 完全降低到低于某个阈值的 0。