嵌套 SVG 的对齐方式答案

【问题标题】：Alignment of nested SVG's嵌套 SVG 的对齐方式
【发布时间】：2022-01-22 04:46:18
【问题描述】：

我想实现几个 SVG 的布局，如下图所示。

灰色框是包含其他元素的顶级 SVG。宽度和高度是已知的。
橙色框包含红色框，彼此之间需要保持相同的距离。类似于justify-content: space-around 对齐项目的方式。
红色框也以相同的方式（但垂直）保持它们的距离。

我一直在尝试使用transform-origin 调整定位，但它似乎不起作用。相反，偏移量总是从每个元素的左上角计算，这会将元素推到视野之外。这是一个非常基本的 sn-p，但遗憾的是，这就是我所拥有的一切。

<svg width="400" height="400" style="background:#ccc;">
  <g transform="translate(10, 10)">
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
  </g>
  <g transform="translate(200, 10)">
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
  </g>
  <g transform="translate(360, 10)">
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
    <svg width="50" height="50">
      <rect width="50" height="50" fill="red" />
    </svg>
  </g>
</svg>

有没有办法以这种方式对齐这些容器不知道红色框的大小？我最终得到的每个解决方案都使用一些计算，我需要减去红色框的宽度和高度的一半。

【问题讨论】：

您可以在 defs 中放置一个矩形，而不是使用所有那些嵌套的 svg 元素。矩形将以点 0,0 为中心，类似于 <rect id="rect" width="50" height="50" fill="red" x="-25" y="-25" /> 接下来您可以将矩形与一起使用，其中 x 和 y 属性定义了 use 元素的位置
@enxaneta 我会试试的。但它也有助于对齐吗？
您需要为网格选择点并这些点中的矩形
您是否需要针对单个红色方块进行更改？
@Danny'365CSI'Engelman no.它们实际上是其他不同大小的导入 SVG 图像。为了简单起见，我在这篇文章中添加了红色方块。基本上我想说的是，我事先不知道确切的大小和纵横比，因为它们每次都是不同的图像。

标签： html css svg

【解决方案1】：

正如评论中指出的那样 @enxaneta ：

除了使用所有嵌套的 svg 元素之外，您还可以在其中放入一个 rect 定义。矩形将以点 0,0
为中心

在 SVG 中，元素位置相对于画布的左上角。
如果您为多个矩形指定相同的x=40 坐标，则它们将垂直对齐。
为了不为每个矩形写入其坐标值以及width 和height 的值，您需要在<defs> 部分中放置一个实例，然后使用<use> 标记克隆它.

在这种情况下，您需要为每个副本指定坐标x,y：

<use xlink:href="#rect" x="40" y="62.5" />

要获得三列，您需要将一列包装在 <g> 组标记中并使用 <use> 克隆它

<use xlink:href="#column" x="150" y="0" />

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="450" height="400" viewBox="0 0 450 400"    style="background:#ccc;">
 <defs>
  <rect id="rect" width="50" height="50" fill="red" x="0" y="0" /> 
 </defs> 
 
<g id="column" > 
 <rect x="30" y="0" width="70" height="400" fill="#C89F33" />
   <use xlink:href="#rect" x="40" y="62.5" /> 
    <use xlink:href="#rect" x="40" y="175" />
      <use xlink:href="#rect" x="40" y="287.5" /> 
</g> 
  <use xlink:href="#column" x="150" y="0" />
    <use xlink:href="#column" x="300" y="0" />  
       
 </svg>

【讨论】：