时间戳

首页 > 解决方案 > 合并两个 SVG 路径：Open Bezier 和 Line

svg - 合并两个 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,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 结果中的路径。

标签： svginkscapelibreoffice-draw

解决方案

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

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

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

推荐阅读