multiple rect in an svg?-CodePudding

I expect rect is like div where's display block?

<svg width="400" height="180">
  <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
  
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

but it will overlap each other. How to make another rect and wrap it within one svg?

CodePudding user response：

You need to adjust the x and y attributes based on whether you want to align it horizontally or vertically.

Since you had a height of 180 for svg, the vertical positioning might be hidden. You need to increase that too.

Horizontal positioning

<svg width="400" height="180">
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    <rect x="200" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Vertical positioning

<svg width="400" height="480">
    <rect width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
    <rect y="200" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>