Why is the inner container not visible?

Question

SVG

I drew a circle in svg using the D3 library. I then inserted a large rectangle inside the circle element, positioned absolutely relative to the circle. The problem is that the rectangle is not visible on the screen (although it can be seen through the chrome dev-tools that it exists in the markup)
Please help me make the rectangle visible. I need this to make a pop-up window in the future.
JSFIDDLE
js:

const dataSet = [
  [ 0,    20 ],
  [ 20,   20 ]
];

const w = 1200;
const h = 250;

const svg = d3.select('body .cost-square-wrap')
            .append('svg')
            .attr('width', w)
            .attr('height', h)
            .attr('viewbox', '0 0 ' + w + ' ' + h);;


svg.append('circle')
   .attr('cx', 100)
   .attr('cy', 100)
   .attr('r', 5)
   .attr('stroke-width', 1)
   .attr('fill', '#000')
    .attr('stroke', '#000')
    .insert("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 150)
    .attr("height", 100)
    .attr('fill', '#f00');

css:

circle {
  position: relative;
}

rect {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
  bottom: -100px;
  left: 50px;
}

Answer 1

If you open the section of the SVG specification dedicated to shapes , it will not be difficult to see that among the elements that can be the content of shapes, the shapes themselves are missing. You cannot nest one shape within another.

Answer 2

The rect tag must be flush with the circle for it to appear.