SVG rectangle inside another rectangle

Asked

Viewed 54 times

0

I want to place a straight element inside another straight element. I used opacity, but always show 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>
html svg

  • Closes the tags <rect properly with /> that works for me. http://jsfiddle.net/L4m2ppe0/

  • Thank you @Sergio

1 answer

2


You have to close the tags <rect properly with /> else HTML will think the second rect is descended 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>

Browser other questions tagged html svg

You are not signed in. Login or sign up in order to post.