SVG内部相对于彼此的中心元素-

Question

在我可能要问的其他地方找不到它：

我有svg矩形，里面还有其他矩形。

我想要实现的是将这些矩形中的每个矩形居中于其父对象的中心，并彼此相对。

如果我将矩形1向下拖动，我希望另一个矩形向上移动以使两个矩形居中-如果我向下拖动另一个元素（应向上推一个矩形），也会发生相同的情况。

这里的问题是我可能具有不同的宽度/高度，并且会有2个或更多的元素。为此有任何数学方程式吗？或我可以寻找的名字？

Answer 1

我将3个矩形放置在一个组中，并按照以下示例使用该组

svg{
  border:1px solid;
  width: 30vh;
}

<svg viewBox="0 0 100 280">
<defs>  
  <g id="rects">
    <rect width="80" height="80"  />
    <rect width="60" height="25" x="10" y="10"  />
    <rect width="60" height="25" x="10" y="45"  />
  </g>
  </defs>
  
  <use xlink:href="#rects" x="10" y="10"  stroke="black" fill="none" />
  <use xlink:href="#rects" x="10" y="100"  stroke="black" fill="none" />
  <use xlink:href="#rects" x="10" y="190"  stroke="black" fill="none" />
</svg>