How to draw a rectangle inside a rectangle using svg?

StackOverflow https://stackoverflow.com//questions/22036996

  •  21-12-2019
  •  | 
  •  

Question

I am trying to draw a rectangle inside a rectangle using svg, but I am not seeing the inner rectangle. Could somebody help me what is the mistake I am doing ?? The code is as below.

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)">
                 <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/>
            </rect>
        </svg>
    </body>
</html>

Thanks in advance

Was it helpful?

Solution

Just draw a rectangle on the top of another: They will be drawn in the same order as you write in your code.

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
            <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
        </svg>
    </body>
</html>

OTHER TIPS

try this code

    <svg width="700" height="200">
        <rect height="100" width="200"stroke-width:1 stroke:rgb(0,0,0)"></rect>
        <rect height="50" width="100" style="fill:rgb(242,242,242);stroke-width:1;stroke:rgb(0,0,0)</rect>
    </svg>

note: it will draw overlapping rectangles as you maintain the order of rect.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top