+ 1

Please what am I doing wrong?

I'm trying to use the svg tag to develop a map using 3 rectangles but only one rectangle pops up after I run it. I've checked a thousand times and I don't know what the problem is. <!DOCTYPE html> <html> <head> <title>Flag</title> </head> <body> <h1 align="center"><b>The Nigerian Flag</b></h1> <svg width="1000" height="1000"> <rect width="75" height="200" stroke="black" fill="green" /> <rect width="75" height="200" fill="#ffffff" stroke="#000000" /> <rect width="75" height="200" fill="green" stroke="#000000" /> </svg> </body> </html>

html5 svg

14th Jan 2022, 9:49 PM

Adese

1 Answer

+ 4

That is because they are all on top of each other. Include x and y coords for the top left of the svg/rectangles for positioning. Since the width is 75, the x coord needs to change (since it’s adjacent). So the second rect should have x=“75” and the third should have x=“150” (of course inside the tag)

14th Jan 2022, 10:57 PM

Kamil Hamid