如何将两个 SVG 路径组合在一起（没有空格）

Question

我能够 使用这种技术 将两个单独的路径合并在一起。但是，我的动画仍然将其视为两条独立的路径。

有没有办法在不使用空格的情况下组合这两条路径？

 M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63
M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/>

 svg {
  fill: none;
}

path {
  stroke: tomato;
  stroke-width: 100;
}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623">
 <path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31"/>
</svg>

原来分开的路径可以在这里查看：

 svg {
  fill: none;
}

path {
  stroke: tomato;
  stroke-width: 100;
}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 25 14905 623">
 <path d="M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3511.9" />
 <path d="M3809.63,496.31c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31" />
</svg>

目标是合并这些路径以匹配上面的 svg 片段——而不在路径中使用空格。

原文由 Raphael Rafatpanah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我发现最简单的解决方案是：

1. 在 Inkscape 中打开 SVG 文件（免费软件，跨平台 https://inkscape.org ）
2. 选择要合并的路径
3. 从路径菜单中，选择联合
4. 保存文件

原文由 TechplexEngineer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

答案是

M3322.09,361.23V473.45c0,14,2,23.41,23.41,23.41H3809.63 c21.41,0,166.41-1,166.41-1s13.07.87,82.08.87c31.75,0,63.51-36.21,95.26-75.31

H3511.9 表示画一条水平线直到 x 点在 3511.9（与之前继承的任何 y）

M3809.63,496.31 表示将“光标”移动到 x、y 坐标。

我将 H3511.9 更改为 H3809.63 并删除了 M3809.63,496.31 并继续使用 c21.41... 曲线命令绘制曲线。

这些资源帮助我理解了 d path 属性的绘制命令。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

https://www.youtube.com/watch?v=k6TWzfLGAKo

原文由 Raphael Rafatpanah 发布，翻译遵循 CC BY-SA 3.0 许可协议