I would add a rectangle as on each Node element
the rect
is added only in the last element.
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
}
Edit I'm using angular And my code is running inside ngAfterViewInit()
hook
Here a stackblitz demo
Try it this way by adding namespace
and attributes required for 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"> <gx="0" y="0"></g> <gx="100" y="100"></g> </svg>
The SVG namespace is ' http://www.w3.org/2000/svg ', and not the empty string.
Additionally a rect with fill none won't be visible, it either needs a fill or a stroke and appears to have neither specified.
Finally it needs a non-zero width and height.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.