Javascript 自动重叠SVG边

我正在处理大量复杂的SVG文件，其中形状在从位图矢量化后共享一些精确的路径（即它们是边到边排列的）。这些形状由路径定义，具有完整的颜色，但没有轮廓

在我的工作流程的下一步中，这将创建一个边缘工件。我发现解决这一问题的最佳方法是手动移动节点，以便边缘有轻微（例如1px）重叠。我需要在开发过程中对30多个插图中的大约1k个形状执行此过程，这就是为什么我希望我的工作流采用自动化过程。我不确定这是否可以通过SVG编辑器插件或javascript应用程序实现

因为形状很复杂，有时会有中空部分，所以每个节点都需要在垂直于填充边的方向上移动

最终目标是使所有现有的边到边部分具有微小的重叠，以消除边缘伪影

SVG形状格式化示例：

  <path
 style="fill:#ab1d0f;fill-opacity:0.65151511;stroke:none;stroke-width:0.75px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 d="M 470.69864,588.16878 C 455.52231,786.44675 423.79624,835.14131 590.12728,799.75617 640.3406,789.07383 635.02232,779.84655 760.89356,718.61568 930.36806,636.17371 742.59028,617.50816 658.00951,552.62236 572.1577,486.76149 535.54865,393.28533 504.21382,416.85787 c -68.79903,51.75605 -26.87605,84.5711 -33.51518,171.31091 z"
 id="shape1"/>

预处理SVG示例：

在上图中：

• 有4种填充形状（粉色、红色、黑色、黄色）
• 黑色的形状被选中，我们看到四个节点
• 我需要将每个节点从填充的一侧向外移动
• 每个节点沿绿色箭头的方向移动

处理后：

• 黄色形状被选中，我们可以看到节点现在和黑色形状的边缘重叠
• 鼠标悬停在粉红色上也会显示其边缘重叠

---

也许你应该简单地用过滤器放大你的形状？大概是这样的：

<filter id="enlarge">
   <feMorphology operator="dilate" radius="1"/>
</filter>

请记住，关于代码的问题（以及SVG标记对于SO问题的重要性）确实需要显示代码，以便人们能够理解您所描述的内容。如果没有一个清晰的、最少的、可运行的代码示例，当您说“这创建了一个边缘工件”时，没有人知道您的意思。如果这是你的第一个问题，请记住记下答案并通读一遍。你写了大量的解释，但仍然缺少一些关键信息。谢谢。我更新了。我特别希望批量修改多个SVG路径中的坐标。每个节点只需要从形状的填充中心移开。这与放大对象不同。如果对象是油炸圈饼，那么中间的洞也会变小，因为内部节点正在远离填充的油炸圈饼。。。所以这和你在第一段中描述的有点冲突？那些不是轮廓，那些是填充形状。唯一的轮廓是在Inkscape中鼠标悬停和对象时出现的细红线。