SVG:如何合并多行以获得单个对象

我有由 4 条线组成的方形,因为这些是 4 条不同的路径,所以我无法获得形状的大小,我正在尝试将这些线合并在一起,以便我将方形作为单个路径,然后我可以使用 getBBox() 方法获取其大小:

方形

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 -237.4911 302.46116 237.4911">
 <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1 0 0 -1 0 0)">
 
  <path  d= "M129.734598 192.711157V226.160594" stroke="red"  stroke-width=".56693" id="1"/>
  <path  d= "M129.734598 192.711157H159.496439" stroke="red"  stroke-width=".56693" id="2"/>
  <path  d= "M159.496439 192.711157V226.160594" stroke="red"  stroke-width=".56693" id="3"/>
  <path  d= "M129.734598 226.160594H159.496439" stroke="red"  stroke-width=".56693" id="4"/>
 
 </g>
</svg>

所以我尝试合并它们,像这样部分可以

M129.734598 192.711157 V226.160594 H159.496439 V226.160594 H159.496439

SVG:如何合并多行以获得单个对象

所以知道如何正确地将方形作为单个路径来制作

jjj0716 回答:SVG:如何合并多行以获得单个对象

提示 1

您的第一条路径

M 129.734598 192.711157 V 226.160594

相当于

M 129.734598 192.711157 L 129.734598 226.160594

你的第二条路

M 129.734598 192.711157 H 159.496439

相当于

M 129.734598 192.711157 L 159.496439 192.711157

也许在这种形式下,移动的顺序可能更明显。

提示 2

在您的第一次尝试中,您已经接近了(为了更清晰,我对这些值进行了四舍五入

M 129 192 V 226 H 159 V 226 H 159

你的最后两个路径命令没有做任何事情。

为了完成正方形,您的第三边(第二个 V)需要返回到起始 Y 位置。而您的第四边(第二个 H)需要返回到起始 X 位置。

希望这会有所帮助,而且不会太神秘。

本文链接:https://www.f2er.com/18605.html

大家都在问