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

Question

我的问题的合并部分在这里得到了很好的回答：解决了两个 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,101,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,101,164)" d="M 7700,4900 C 7816,4847 7964,4842 8000,4700 m [(8799-7699) + (8800-8799), (6099-4699) + (6100-6099)] l (8827-8799),(6100-6099)"/>
</g>

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

Answer 1

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

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,4900 C 7816,4847 7964,4842 8000,4700 M 8800,6100 L 8827,6100"/>
</g>

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

Merging two SVG Paths: Open Bezier and Line

svg

inkscape

libreoffice-draw