How to create polyline - SVG

Question

I am trying to create this:

polyline in SVG. How would I do that?

Thank for all answers

Answer 1

The image is not very clear. I suppose it's an arc. If you need to create it as a polyline you need to calculate the position of the points and store them in an array. Then you need create the string for the points attribute using the points in the pointsArray. Finally you need to set the value of the points attribute of the polyline. I hope it helps.

var pointsArray = [];
let c = {x:50,y:40},// the center of the arc
r=20;
for (var a = -180; a <= 0; a+=6) {
  var x = c.x + r * Math.cos(a * Math.PI/180);
  var y = c.y + r * Math.sin(a * Math.PI/180);
 pointsArray.push([x,y])
}

let points = "";
pointsArray.forEach(p =>{
points += `${p[0]},${p[1]} `
});

theArc.setAttributeNS(null,"points",points);

<svg viewBox="0 0 100 50">
<polyline id="theArc" points="" stroke="black" fill="none" />

</svg>