如何将两个 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"/>

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 片段——在路径中不使用空格。

Answer 1

我找到了一个很棒的用于路径操作的在线编辑器： yqnn.github.io/svg-path-editor/

1. 粘贴您的路径段

2. [可选]检查解析的路径命令（例如删除M段之间的内容）

3. [可选] 转换为“abs”或“rel”命令

4. [可选] 设置“缩小输出”复选框

5. 复制输出

   m3322.09 361.23v112.22c0 14 2 23.41 23.41 23.41h464.13c21.41 0 166.41-1 166.41-1s13.07.87 82.08.87c31.75 0 63.51-36.21 95.26-75.31
   

Answer 2

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

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

Answer 3

答案是

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