使用 js 将 svg 矩形添加到 dom

Question

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

仅在最后一个元素中添加 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 演示

Answer 1

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

此外，带有填充 none 的矩形将不可见，它需要填充或描边，但似乎都没有指定。

最后它需要 non-zero 宽度和高度。

Answer 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

使用 js 将 svg 矩形添加到 dom

adding svg rectangle to dom using js

javascript

angular

dom

svg

jquery-selectors