Javascript 使用js向dom添加svg矩形

我会在每个节点元素上添加一个矩形

rect

仅添加到最后一个元素中

  ngAfterViewInit() {


  let rect : NodeList = this.synoptic.nativeElement.querySelectorAll("#stops g");
  let rect2 = document.createElementNS('','rect');
  rect2.setAttribute("fill","none");
  rect.forEach((elm : Node) => {
    console.log(elm.firstChild) #### Well selecting the first element
    elm.insertBefore(rect2,elm.firstChild);
    console.log(elm) ####rect  added
  })
### rect is awailable only in the last elm
}

编辑我正在使用angular，我的代码在

ngAfterViewInit（）中运行

stackblitz演示
SVG名称空间是“”，而不是空字符串

此外，带有fill none的矩形将不可见，它可能需要填充或笔划，并且似乎既没有指定填充也没有指定笔划

最后，它需要一个非零的宽度和高度。
通过添加
名称空间
和
rect
所需的属性来尝试这种方法


（函数（）{
设rect=document.queryselectoral（#停止g”）；
rect.forEach（e=>{
让rect2=document.createElements（'http://www.w3.org/2000/svg“，”rect“）；
rect2.setAttribute（“fill”和“#000”）；
rect2.setAttribute（'x'，e.getAttribute（'x'）；
rect2.setAttribute（'y'，e.getAttribute（'y'）；
rect2.setAttribute（'height'，'50'）；
rect2.setAttribute（'width'，'50'）；
e、 附肢儿童（rect2）；
});
})();

我已经添加了名称空间，但什么也没有发生。我已经更新了我的问题。Rect是一个节点列表，您的示例只处理一个节点。除此之外，我将插入rect元素作为第一个孩子。这与我正在做的相同，但不为我工作。你的意思是这个解决方案在你的环境中不起作用？是的，我编辑了我的代码，提到我正在使用Angularyeah，没关系。这应该可以很好地工作在角度。你能做一个你正在试穿的样品吗