Добавить объект в существующий SVG

Question

Я борюсь с добавлением объекта в существующий SVG через JavaScript. Почему-то я не могу заставить его работать - я пробовал несколько разных методов.

Вот моя последняя попытка:

c1x = 50;
cy = 200;

var gap = 100;

for (var i = 0; i <= 5; i++) {
  document.querySelector(".c" + i).setAttribute("cx", c1x);
  document.querySelector(".c" + i).setAttribute("cy", cy);
  c1x += gap;
};


/* ######## HERE ######## */

var svg = document.querySelector('svg');

var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width','187');
rect.setAttribute('height','234');
rect.setAttribute('fill','#fff');
rect.setAttribute('stroke','#000');
rect.setAttribute('stroke-width','2');
rect.setAttribute('rx','7');

svg.appendChild(rect);

svg {
  width: 100%;
  height: 400px;
  background-color:#d1ff88;
}

<svg class="test">
  <circle class="c0" cx="50" cy="50" r="15" stroke="black" stroke-width="3" fill="red" />
  <circle class="c1" cx="150" cy="50" r="15" stroke="black" stroke-width="3" fill="red" />
  <circle class="c2" cx="150" cy="50" r="15" stroke="black" stroke-width="3" fill="red" />
  <circle class="c3" cx="150" cy="50" r="15" stroke="black" stroke-width="3" fill="red" />
  <circle class="c4" cx="150" cy="50" r="15" stroke="black" stroke-width="3" fill="red" />
</svg>

Буду очень признателен за вашу помощь.

Спасибо!