Rectangle SVG within another rectangle

Navigation
0

I want to place a rect element inside another rect element. I used opacity, but it always shows me a rectangle. I used the following code: 

<svg width="400" height="180">
 <g>

  <rect x="50" y="20" width="150" height="150" style="fill:black;stroke:black;stroke-width:2;fill-opacity:0;stroke-opacity:1;">

  <rect x=50 y=30 width=50 height=50>
</g>
</svg>
    
asked by anonymous 26.12.2014 / 11:19

1 answer

2

You need to close the tags <rect properly with /> otherwise HTML will think that the second rect is descending from the first.

You can use <rect ... /> : 

<svg width="400" height="180">
    <g>
        <rect x="50" y="20" width="150" height="150" style="fill:black;stroke:black;stroke-width:2;fill-opacity:0;stroke-opacity:1;" />
        <rect x=50 y=30 width=50 height=50 />
    </g>
</svg>

or you can use <rect ...></rect> : 

<svg width="400" height="180">
    <g>
        <rect x="50" y="20" width="150" height="150" style="fill:black;stroke:black;stroke-width:2;fill-opacity:0;stroke-opacity:1;"></rect>
        <rect x=50 y=30 width=50 height=50></rect>
    </g>
</svg>
    
26.12.2014 / 11:51
JSON Handling with Asp.net Web API Transition does not work in class exchange with JavaScript?