Почему внутренний контейнер не виден?

Question

[zlodiak]

Я нарисовал кружочек в svg средствами библиотеки D3. Затем я вставил в элемент кружочка большой прямоугольник, спозиционированный абсолютно относительно кружочка. Проблема в том, что прямоугольник не виден на экране(хотя через chrome dev-tools видно, что в разметке он существует)

Помогите пожалуйста сделать так чтобы прямоугольник был виден. это мне нужно чтобы в будущем сделать всплывающее окно.

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

[0xD34F]

Если открыть раздел спецификации SVG посвящённый фигурам, то нетрудно будет увидеть, что среди элементов, которые могут являться контентом фигур, сами фигуры отсутствуют. Нельзя вкладывать одну фигуру в другую.

Answer 2

[rampagerushtc]

Тэг rect должен находиться на одном уровне с circle, тогда он появится.