javascript - 如何将两个 SVG 路径组合在一起(不带空格)

Question

我能够将两个单独的路径合并在一起using this technique 。但是，我的动画仍然将其视为两条单独的路径。

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

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

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
   

<小时/>