如何将两个 SVG 路径组合在一起(无空格) [英] How to combine two SVG paths together (without spaces)

问题描述

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

I was able to merge two separate paths together using this technique. However, my animation is still treating this as two separate paths.

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

Is there a way to combine these two paths without using spaces?

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>

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

The originally separate paths can be viewable here:

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

推荐答案

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

I found the easiest solution was:

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

这篇关于如何将两个 SVG 路径组合在一起(无空格)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！