HTML polygon created by JS not rendering

Question

I have the following code:(JSFiddle: http://jsfiddle.net/ms5ydje1/)

I want to draw 4 polygons. One triangle and three squares.

It seems that I am only successful in rendering the polygon that already exists in the HTML DOM under the svg tag; The newly created polygons, in the second loop, are added to the HTML DOM but do not display. What am I doing wrong?

var canvas = document.getElementsByClassName("canvas")[0]
canvas.setAttribute('viewBox', "-100 -100 1000 1000");

var centre = [0, 0];
var radius = 70;
var numPoints = 3;
var theta = 350.00 / numPoints;

var points = ""
var pointsArr = []
for (var i = 1; i <= numPoints; i++) {

  // calc x/y
  x = radius * Math.cos(2 * Math.PI * i / numPoints + theta) + centre[0];
  y = radius * Math.sin(2 * Math.PI * i / numPoints + theta) + centre[1];
  pointsArr.push([x, y])

  points = points + `${x},${y} `
}

prev = pointsArr[pointsArr.length - 1]
midPoints = []
for (var i = 0; i < numPoints; i++) {
  cur = pointsArr[i]
  midPoints.push([(prev[0] + cur[0]) / 2, (prev[1] + cur[1]) / 2])
  prev = pointsArr[i]
}

// HERE we set points for the current polygon under the HTML SVG tag
var polygon = document.getElementsByClassName("main")[0]
polygon.setAttribute('points', points);

// 2
for (var j = 0; j < numPoints; j++) {
  var centre2 = midPoints[j];
  var radius2 = radius / 2;
  var numPoints2 = 4;
  var theta2 = 350.00 / numPoints2;

  var points2 = ""
  var pointsArr2 = []
  for (var i = 0; i < numPoints2; i++) {
    console.log(i)
    // calc x/y
    x = radius * Math.cos(2 * Math.PI * i / numPoints2 + theta2) + centre2[0];
    y = radius * Math.sin(2 * Math.PI * i / numPoints2 + theta2) + centre2[1];
    pointsArr2.push([x, y])

    points2 = points2 + `${x},${y} `

  }

  // HERE is where we are adding the polygons
  var polygon2 = document.createElement('polygon')
  polygon2.setAttribute('class', 'main')
  polygon2.setAttribute('points', points2)
  canvas.appendChild(polygon2)
}

.main {
  fill: none;
  stroke: indigo;
  stroke-width: 1;
  animation: rotate 5s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

<svg class="canvas" xmlns="http://www.w3.org/2000/svg">
  <polygon class="main"></polygon> 
</svg>

score 1 · Accepted Answer · answered Jul 27 '22 at 04:04

1

Try writing document.createElementNS("polygon") instead of document.createElement

answered Jul 27 '22 at 04:04

Aziz Hakberdiev

180
2
9

Could you add a bit of explanation as to why this is necessary? I didn't find a problem with using just document.createElement (in terms of actually creating and appending the element). – A Haworth Jul 27 '22 at 05:34
`createElementNS` is used to create non-html tags – Aziz Hakberdiev Jul 27 '22 at 05:51
Yes, but I didn't find a problem with using createElement which is why I was wondering. – A Haworth Jul 27 '22 at 05:53
1

@AHaworth createElement("polygon") will create an HTMLUnknownElement (in an HTML doc, in an XML one it will create a bare Element), `createElementNS("http://www.w3.org/2000/svg", "polygon")` will create an SVGPolygonElement. – Kaiido Jul 27 '22 at 06:30

HTML polygon created by JS not rendering

1 Answers1