multiple rect in an svg?

Issue

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?

Solution

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>

Answered By – m4n0

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.