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

【问题标题】：How to combine two SVG paths together (without spaces)如何将两个 SVG 路径组合在一起（没有空格）
【发布时间】：2026-01-05 07:50:01
【问题描述】：

我能够将两条单独的路径合并在一起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 sn-p -- 路径中不使用空格。

【问题讨论】：

标签： javascript html svg

【解决方案1】：

答案是

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

在1)之后再增加一步，确保将所有笔划转换为路径以便可以合并：选择路径菜单->笔划到路径

【解决方案3】：

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

粘贴您的路径段
[可选] 检查解析的路径命令（例如删除段之间的M）
[可选] 转换为“abs”或“rel”命令
[可选] 设置“缩小输出”复选框

复制输出

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

【讨论】：

【解决方案4】：

对于那些在研究以确保不会像我一样合并路径时遇到这个问题的人来说，这里的问题只是一个错字。

在上面合并的sn-p中，第一个路径的结尾从原来的23.41H3511.9变成了23.41H3809.63。

通过放置一个空格（或者根本没有空格，只是在将它们放在 d 属性值中时路径之间没有逗号）将路径放在一起应该始终可以不加修改地工作。

（顺便说一句，在阅读了他的链接和提示后，Raphael 的回答让我现在对 SVG 不再那么神秘了）

【讨论】：