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

答案是

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表示移动＆＃34;光标＆＃34;到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

Answer 2

对于那些在研究过程中遇到这个问题以确保合并路径没有问题的人，这里的问题只是一个错字。

在上面的合并代码段中，第一条路径的结尾已从原始23.41H3511.9更改为23.41H3809.63。

通过放置一个空格（或根本没有空格，只是在将它们放入d属性值时，路径之间没有逗号）将路径放在一起应始终无需修改即可。

（另一方面，拉斐尔的回答让SVG在阅读他的链接和提示后对我来说不那么神秘了）

Answer 3

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

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

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

3 个答案: