CODEWITHSUNDEEP
javascriptangulardomsvgjquery-selectors
infodev
infodev

Reputation: 5245

adding svg rectangle to dom using js

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

Upvotes: 1

Views: 851

Answers (2)

Robert Longson
Robert Longson

Reputation: 124059

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.

Upvotes: 0

Nidhin Joseph
Nidhin Joseph

Reputation: 10237

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">
<g x="0" y="0"></g>
<g x="100" y="100"></g>
</svg>

Angular Working Fiddle

Upvotes: 2

Related Questions