【发布时间】：2019-10-11 15:46:54
【问题描述】：
我正在处理大量复杂的 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 种填充形状（粉色、红色、黑色、黄色）
- 黑色形状被选中，我们看到四个节点
- 我需要将每个节点从填充侧向外移动
- 每个节点都向绿色箭头方向移动
处理后：
- 黄色形状被选中，我们可以看到节点现在与黑色形状的边缘重叠。
- 鼠标悬停在粉红色上也显示它的边缘也重叠
【问题讨论】：
-
请记住，关于代码的问题（以及用于 SO 问题的 SVG 标记计数）确实需要显示代码，以便人们能够理解您所描述的内容。如果没有一个清晰的、最小的、可运行的代码示例，没有人知道你说“这会创建一个边缘工件”是什么意思。如果这是您的第一个问题，请记得拨打tour 并通读"how to ask a good question"。您已经写了很多解释，但仍然缺少一些关键信息。
-
谢谢。我更新了。我特别希望批量修改多个 SVG 路径中的坐标。每个节点只需要从填充的形状中心移开。这与放大对象不同。如果对象是甜甜圈，那么中间的孔也会变小，因为内部节点正在远离填充的甜甜圈。
-
你展示的图片有轮廓，但是......所以这与你在第一段中描述的有点冲突？
-
那些不是轮廓，而是填充形状。唯一的轮廓是 Inkscape 中鼠标悬停和对象上的细红线。
标签： javascript svg inkscape