在 SVG 中使路径连续答案

【问题标题】：Make Paths Contiguous in SVG在 SVG 中使路径连续
【发布时间】：2014-12-21 00:47:04
【问题描述】：

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

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

【问题讨论】：

我能找到的最好的方法是你使用 Inkscape 的开头，但我找不到任何可以让我控制 at 扩展级别的东西。
你有多少这样的路径，是不是很大的 svg？如果您的意思是图 1 中的非重合路径，这是因为它们是不同的路径，它们不应该是，您必须将 svg“打印”到您想要的分辨率，然后在相反的方向使用完全相同的路径。如果您指的是图 2 上的白点，那是您需要删除的路径段。

【解决方案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>

【讨论】：