如何创建折线 - SVG答案

【问题标题】：How to create polyline - SVG如何创建折线 - SVG
【发布时间】：2019-05-24 15:18:25
【问题描述】：

我正在尝试创建这个：

SVG 中的折线。我该怎么做？

感谢所有回答

【问题讨论】：

【解决方案1】：

图像不是很清晰。我想这是一个弧线。如果您需要将其创建为折线，则需要计算点的位置并将它们存储在数组中。然后您需要使用pointsArray 中的点为points 属性创建字符串。最后，您需要设置折线的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>

【讨论】：