如何创建折线-SVG

Question

我正在尝试创建它：

SVG中的

折线。我该怎么办？

感谢所有答案

Answer 1

图像不是很清晰。我想这是弧线。如果需要将其创建为折线，则需要计算点的位置并将其存储在数组中。然后，您需要使用points中的点为pointsArray属性创建字符串。最后，您需要设置折线的points属性的值。希望对您有所帮助。

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>