Creating a mutable SVG with Javascript

Question

I would like to create a resizable SVG using JavaScript. If you run the code, you'll notice the "svgTriangle[0].innerHTML = "<polygon points='";" line does not get appended inside the SVG tag. If someone could help me figure out why this is not getting appended, I would greatly appreciate it. Thanks.

var svgTriangle = document.getElementsByClassName("svg-triangle");
var bgTrianglePoints;

function updateOnResize() {
  bgTrianglePoints = [
    [0, 0],
    [window.innerWidth * 0.76, 0],
    [window.innerWidth * .16, window.innerHeight * 1.2],
    [0, window.innerHeight * 1.2]
  ];

  svgTriangle[0].innerHTML = "<polygon points='";
  for (var i = 0; i < bgTrianglePoints.length; i++) {
    svgTriangle[0].innerHTML += bgTrianglePoints[i][0] + "," + bgTrianglePoints[i][1] + " ";
  }
  svgTriangle[0].innerHTML += "'/>";
}

window.onresize = function() {
  updateOnResize();
}

updateOnResize();

html,
body {
  margin: 0px;
  padding: 0px;
}

#header {
  width: 100vw;
  height: 85vh;
}

.svg-triangle {
  width: 100%;
  height: 100%;
  fill: red;
}

<div id="header">
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-triangle"></svg>
</div>

SVG will resize by itself. Here's one I made earlier https://github.com/QuentinUK/quentinuk.github.com/blob/master/spiral.html — QuentinUK, Jun 12 '22 at 17:15
Please read about [createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) Also read about [How to save / add all special characters](https://stackoverflow.com/questions/39694148/how-to-save-add-all-special-characters-like-etc) in javascript Also use a viewBox, don't use window.innerWidth — enxaneta, Jun 12 '22 at 17:50

score 1 · Accepted Answer · answered Jun 12 '22 at 17:32

To answer your question, why the first line does not appear in the HTML, it is probably because it makes the HTML invalid. You could instead use the document.createElementNS method as follows:

const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");

to create the polygon element in the SVG namespace.

Then, you can create the string for the points attribute:

let points = "";

for (var i = 0; i < bgTrianglePoints.length; i++) {
    points += bgTrianglePoints[i][0] + "," + bgTrianglePoints[i][1] + " ";
  }

and finally set the attribute on the element:

polygon.setAttribute("points", points);

Now, you can use svgTriangle.appendChild(polygon) to add the polygon to the HTML.

Another possibility is to use the points property on the polygon element, which is an SVGPointList and use appendItem on it in a loop to add the points, but that is quite much code and not really necessary. Also, SVGPoint is already deprecated...

Beautiful, thanks – Jonathan Mulvahill Jun 12 '22 at 17:41 — Jonathan Mulvahill, Jun 12 '22 at 17:41

Creating a mutable SVG with Javascript

1 Answers1