How to draw a rectangle inside a rectangle using svg?

html svg rectangles
sakthisundar picture sakthisundar · Feb 26, 2014 · Viewed 11.5k times · Source

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

Answer

Andrew Surzhynskyi picture Andrew Surzhynskyi · Feb 26, 2014

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>

Related questions

SVG Rectangle display HTML title on mouseover

I try to display a tooltip on mouse hover a rectangle. My attempt were using <g> and set a title to it and set a title to the <rect> itself but does not produce any visible …

Read More
Do I use <img>, <object>, or <embed> for SVG files?

Should I use <img>, <object>, or <embed> for loading SVG files into a page in a way similar to loading a jpg, gif or png? What is the code for each to ensure it …

Read More
SVG drop shadow using css3

Is it possible to set drop shadow for an svg element using css3 , something like box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; I saw some remarks on creating shadow using filter effects. Is there an …

Read More