Как создать полилинию - SVG - PullRequest
Новая
       59

Как создать полилинию - SVG

0 голосов
/ 26 декабря 2018

Я пытаюсь создать это:

img

полилинии в SVG.Как бы я это сделал?

Спасибо за ответы

1 Ответ

0 голосов
/ 26 декабря 2018

Изображение не очень четкое.Я полагаю, это дуга.Если вам нужно создать его как ломаную линию, вам нужно рассчитать положение точек и сохранить их в массиве.Затем вам нужно создать строку для атрибута 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>
...