在节点列表上添加svg元素仅适用于循环中的最后一个元素

Question

我将在节点列表的每个第一个子节点上添加一个rect。

我循环此列表并每次添加一个矩形

正在发生的事情是，仅在循环的最后一个元素上添加了rect。

let rect : NodeList = this.synoptic.nativeElement.querySelectorAll("#stops g");
let rect2 = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect2.setAttribute("fill","red");
rect2.setAttribute('x', '0');
rect2.setAttribute('y', '0');
rect2.setAttribute('height', '50');
rect2.setAttribute('width', '50');
rect.forEach((elm : Node) => {
  elm.insertBefore(rect2,elm.firstChild);
  console.log(elm)
})

这里有一个example