使用js将svg矩形添加到dom

Posted 2023-03-05

【中文标题】使用js将svg矩形添加到dom

【英文标题】：adding svg rectangle to dom using js

【发布时间】：2019-11-17 19:35:16

【问题描述】：

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

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() 钩子内运行

Here stackblitz 演示

【参考方案1】：

SVG 命名空间是“http://www.w3.org/2000/svg”，而不是空字符串。

此外，没有填充的矩形将不可见，它要么需要填充，要么需要描边，而且似乎都没有指定。

最后它需要一个非零的宽度和高度。

【讨论】：

我添加了命名空间，但没有任何反应

我已经更新了我的问题

【参考方案2】：

通过添加namespace 和rect 所需的属性来尝试这种方式

(function() 

  let rect = document.querySelectorAll("#stops g");
  rect.forEach(e => 
    let rect2 = document.createElementNS('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.appendChild(rect2);
  );

)();

<svg id="stops" xmlns="http://www.w3.org/2000/svg">
<g x="0" y="0"></g>
<g x="100" y="100"></g>
</svg>

Angular Working Fiddle

【讨论】：

rect 是一个 NodeList ，您的示例仅使用一个节点。除此之外，我将插入 rect 元素作为第一个子元素

这是我正在做的事情，但对我不起作用

你的意思是这个解决方案在你的环境中不起作用？

是的，我已经编辑了我的代码以提及我正在使用 Angular

是的，没关系。这应该在角度上工作得很好。你能做一个你正在尝试的样本吗stackblitz.com/edit/angular-5qp2gz