Как расположить элементы SVG поверх другого div?

Question

Я пытаюсь расположить этот маленький прямоугольник SVG поверх базового прямоугольника, присутствующего в том же SVG viewBox, и поверх другого div, который находится чуть ниже него.

Любая помощь будет признательна.

Редактировать 1 Я хочу прямоугольник с id = "over" сверху div с class = "firstrect" и div с class = "secondrect".

.main {
  position: relative;
}

.secondrect {
  width: 100%;
  background: purple;
  height: 30px;
}

#over {
  position: absolute;
}

<div class="main">
  <div class="firstrect">
    <svg viewBox="0 0 50 10">
          <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" />
          <rect
            id="over"
            x="10"
            y="9"
            width="20%"
            height="20%"
            style="fill: rgb(102, 201, 171);"
          />
        </svg>
  </div>
  <div class="secondrect"></div>
</div>

Answer 1

набор svg overflow: visible;

svg {
  overflow: visible;
}

.secondrect {
  width: 100%;
  background: purple;
  height: 30px;
}

#over {
  position: absolute;
}

<div class="main">
  <div class="firstrect">
    <svg viewBox="0 0 50 10">
          <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" />
          <rect
            id="over"
            x="10"
            y="9"
            width="20%"
            height="20%"
            style="fill: rgb(102, 201, 171);"
          />
        </svg>
  </div>
  <div class="secondrect"></div>
</div>

Answer 2

1. Добавить class = "viewbox" в окно просмотра.
2. Затем добавьте переполнение: видимый в указанном классе
3. Затем настройте координаты x и y, как считаете нужным

.main {
  position: relative;
}
/*Add class="viewbox" to viewbox */
.viewbox {
 overflow: visible;
}

.secondrect {
  width: 100%;
  background: purple;
  height: 30px;
}

#over {
  position: absolute;
}

<div class="main">
  <div class="firstrect">
    <svg viewBox="0 0 50 10" class="viewbox">
          <rect width="100%" height="100%" style="fill: rgb(102, 102, 201);" />
          <rect
            id="over"
            x="10"
            y="9"
            width="20%"
            height="30%"
            style="fill: rgb(152, 251, 071);"
          />
        </svg>
  </div>
  <div class="secondrect"></div>
</div>