I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known.
https://i.stack.imgur.com/8dSlmm.png
The orange boxes must maintain the same distance between each other, mimicking the behavior of justify-content: space-around for alignment. Similarly, the red boxes should also maintain their vertical distance from one another.
I have attempted to adjust the positioning using transform-origin, but it does not seem to produce the desired results. Instead, the offset is always calculated from the top-left corner of each element, causing them to be pushed out of view. Below is a basic code snippet that showcases my attempts:
<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>I am looking for a way to align these containers in the specified manner without requiring prior knowledge of the dimensions of the red boxes. Each solution I attempt seems to involve complex calculations, such as subtracting half of the width and height of the red boxes. Any help or insights would be greatly appreciated!