如何合并两个 svg 路径？

Question

我尝试了这个工具，但我无法加入这些线并使它们成为单一路径我不能加入这些线还是我做错了？这是代码

<svg width="1200" height="800" version="1.1" viewBox="0 0 317.5 211.67" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="#000" stroke-width=".26458px">
    <path d="m19.333 167.93-0.12636-2.9063 8.5925-8.5925-0.12636-7.3289 4.6753-4.6753v-17.564l5.4335-5.0544-0.12636-10.235"/>
    <path d="m32.348 126.87-2.9063-3.159 0.12636-19.839"/>
  </g>
</svg>

Answer 1

杰克·阿奇博尔德\xe2\x80\x99s SVGOMG可以通过“合并路径”选项合并这两个路径。

\n

通常，您可以简单地连接路径命令（d 属性）。
\n在您的情况下 \xe2\x80\x93 两个路径都以相对 MoveTo 命令开头（注意小写命令字母“m”），同时使用大量“速记”命令。

\n

有时更详细/基本的符号（包括每个路径段的命令字母）可能会有所帮助 \xe2\x80\x93 ，或者过度缩小可能会降低代码 \xe2\x80\x99s 的可读性：

\n

\r\n

\r\n

<svg width="1200" height="800" version="1.1" viewBox="0 100 317.5 211.67" xmlns="http://www.w3.org/2000/svg">\n    <g fill="none" stroke="#000" stroke-width=".26458px">\n        <path d="\n                 M 19.333 167.93\n                 l -0.12636-2.9063 \n                 l 8.5925-8.5925\n                 l -0.12636-7.3289 \n                 l 4.6753-4.6753\n                 v -17.564\n                 l 5.4335-5.0544\n                 l -0.12636-10.235\n                 \n                 M 32.348 126.87\n                 l -2.9063 -3.159 \n                 l 0.12636 -19.839"/>\n    </g>\n</svg>

\r\n

\r\n

\r\n

\n

上面的代码没有改变任何坐标值，但添加了一些 svg 命令“断点”。
\n一旦你的代码被解开，你就可以优化它（通过 svgomg 等）

\n

你不需要\xe2\x80\x99t所有的缩进和空格\xe2\x80\x93，重点是要记住大多数svg路径命令都是基于x/y坐标对（除了“v”和“h”.. .可能还有一些我\xe2\x80\x99已经忘记了...）。

\n

\r\n

\r\n

<svg width="1200" height="800" version="1.1" viewBox="0 100 317.5 211.7" xmlns="http://www.w3.org/2000/svg">\n  <path d="M19.3 168v-3l8.5-8.6-.1-7.3 4.6-4.7V127l5.5-5-.1-10.3\n m-5.4 15.2-2.9-3.2.2-19.8" fill="none" stroke="#000" stroke-width=".3"/>\n</svg>

\r\n

\r\n

\r\n

\n