合并两个 SVG 路径：Open Bezier 和 Line

如何解决合并两个 SVG 路径：Open Bezier 和 Line

我的问题的合并部分在这里得到了很好的回答：https://stackoverflow.com/a/49051988/4272389 解决了两个 LineGradients，一个是线节点，另一个是路径节点。

在我的情况下，我有一个 Open Bezier 路径和一个 Line 路径，但不确定 LineGradient 的答案是否仍然适用

<g class="com.sun.star.drawing.OpenBezierShape">
 <g id="id5">
  <rect class="BoundingBox" stroke="none" fill="none" x="7699" y="4699" width="303" height="203"/>
  <path fill="none" stroke="rgb(52,101,164)" d="M 7700,4900 C 7816,4847 7964,4842 8000,4700"/>
 </g>
</g>
<g class="com.sun.star.drawing.Lineshape">
 <g id="id6">
  <rect class="BoundingBox" stroke="none" fill="none" x="8799" y="6099" width="30" height="3"/>
  <path fill="none" stroke="rgb(52,164)" d="M 8800,6100 L 8827,6100"/>
 </g>
</g>

使用之前的答案 (https://svgwg.org/svg2-draft/coords.html#ComputingAViewportsTransform) 中建议的视框变换过程，合并是否需要扩展边界框，然后使用来自 id5 的原点，然后将 id6 坐标转换为我调用的扩展框内的相对值“合并”？： 我的算术表达式是伪代码，表示我的变换公式）

<g id="merged">
  <rect class="BoundingBox" stroke="none" fill="none" x="8799" y="6099" width="300+(8799-7699)+30" height="203+(6100-4699)+3"/>
  <path fill="none" stroke="rgb(52,4700 m [(8799-7699) + (8800-8799),(6099-4699) + (6100-6099)] l (8827-8799),(6100-6099)"/>
</g>

原因：片段是用 LibreOffice draw 绘制的，路径是用 Inkscape 连接的，但我不能完全这样做，所以我必须在最终的 Inkscape 结果中手动关闭路径。

解决方法

路径可以有多个子路径。所以大多数情况下，您可以将它们附加在一起，如下所示：

d="M 7700,4900 C 7816,4847 7964,4842 8000,4700 M 8800,6100 L 8827,6100"/>

您唯一需要注意的是第二条路径中的移动命令是否是小写的 m。在单个路径中，以 m（相对移动）开头是错误的，它被解释为 M（绝对移动）。但是，如果您将其附加到另一条路径，小写的 m 将是有效的。因此，您需要在附加时将 m 更改为 M。

至于边界框，你只需要做一个“联合”操作。换句话说，找到两个矩形的最小和最大 X 和 Y 坐标。

Box 1: minX="7699" minY="4699" maxX="7699 + 303 = 8002" maxY="4699 + 203 = 4902"
Box 2: minX="8799" minY="6099" maxX="8799 + 30 = 8829" maxY="6099 + 3 = 6102"

Union: minX="7699" minY="4699" maxX="8829" maxY="6102"
Box:   x="7699" y="4699" width="1130" height="1403"

所以合并后的路径应该是：

<g id="merged">
  <rect class="BoundingBox" stroke="none" fill="none" x="7699" y="4699" width="1130" height="1403"/>
  <path fill="none" stroke="rgb(52,101,164)" d="M 7700,6100"/>
</g>