在SVG中使路径连续

Question

我有一个SVG，它有一些粗的笔划，当这些被删除时，SVG中的间隙被揭示出来，如下：

查看左侧的间隙。无论如何都要自动或快速扩展路径，以便它们“捕捉”到邻居边界，从而消除间隙？

Answer 1

如果你想纠正源数据，那么我建议一种检测交叉点的算法，提取匹配的子路径，然后用其双子路径替换其中一个子路径。

如果您只是希望它在视觉上看起来正确，您可以使用过滤器来提取白色区域，将它们重新着色为蓝色并将它们合成。这很容易做到。将下面的颜色矩阵中的R G和B调整为您想要的0到1比例的rgb（又名纯蓝色为0 0 1，中灰色为0.5 0.5 0.5）

  <filter id="recolor-white" color-interpolation-filters="sRGB">
    <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
    <feComponentTransfer in="lumMap" result="highlightMask">
       <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0  0 0 0 0 0 0 0 0 1"/>
    </feComponentTransfer>

     <feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>

        <feColorMatrix in="highlights" result="bluepatch" type="matrix" values="0 0 0 0 R
                                                             0 0 0 0 G
                                                             0 0 0 0 B
                                                             0 0 0 1 0"/>

  <feComposite operator="over" in="bluepatch" in2="SourceGraphic" result="final"/>

</filter>