Линии и ломаные: line, polyline, polygon

Для построения простых линий используется метод line(). Он позволяет задать начальные и конечные координаты линии в формате (x1, y1, x2, y2).

const draw = SVG().addTo('body').size(600, 400);

const line = draw.line(50, 50, 300, 50);
line.stroke({ color: '#f06', width: 4 });

Ключевые моменты:

  • stroke({ color, width, linecap }) — задаёт цвет, толщину и стиль окончания линии (butt, round, square).
  • Координаты задаются относительно контейнера SVG, созданного методом SVG().size(width, height).
  • Можно использовать метод .move(x, y) для перемещения линии, хотя для прямой линии чаще удобнее менять координаты напрямую.
line.move(100, 100); // смещает всю линию на новые координаты

Ломанные линии с polyline

Для создания ломаных линий используется polyline(). В отличие от line(), polyline может иметь произвольное количество точек.

const polyline = draw.polyline('50,150 150,50 250,150 350,50');
polyline.fill('none').stroke({ color: '#0f9', width: 3 });

Особенности:

  • Точки задаются строкой "x1,y1 x2,y2 x3,y3 …" или массивом массивов [[x1,y1],[x2,y2],[x3,y3]].
  • Ломаная линия не замыкается автоматически. Если нужно замкнуть ломаную, следует использовать polygon или вручную добавить последнюю точку равной первой.
  • Polyline поддерживает все стандартные свойства стиля: stroke-dasharray, stroke-opacity, fill и т.д.
polyline.stroke({ dasharray: '5,5', width: 2 });

Замкнутые фигуры с polygon

polygon() позволяет создавать замкнутые многоугольники. В отличие от polyline, последняя точка автоматически соединяется с первой.

const polygon = draw.polygon('100,200 200,100 300,200 200,300');
polygon.fill('#ff0').stroke({ color: '#f00', width: 2 });

Особенности polygon:

  • Замыкание происходит автоматически, поэтому дополнительная точка не нужна.
  • Можно комбинировать с анимацией: .animate(1000).rotate(45).
  • Polygon поддерживает все свойства трансформации (rotate, scale, translate) и фильтры (blur, shadow).

Работа с точками через массивы

Для удобного построения сложных фигур лучше использовать массивы точек:

const points = [
  [50, 50],
  [150, 100],
  [200, 50],
  [300, 150]
];

draw.polyline(points).stroke({ color: '#00f', width: 2 }).fill('none');
draw.polygon(points).fill('#0f0').stroke({ width: 3 });

Такой подход облегчает динамическое добавление точек и использование циклов.

Изменение и анимация линий

SVG.js позволяет изменять линии после их создания. Для line:

line.plot(100, 100, 400, 100); // меняет координаты начала и конца линии

Для polyline и polygon:

polyline.plot([[50,150],[150,50],[250,150],[350,50]]);
polygon.plot([[100,200],[200,100],[300,200],[200,300]]);

Анимация:

line.animate(2000, '<>').plot(100, 200, 400, 200);
polygon.animate(1500).scale(1.5, 1.5);

Ключевые параметры анимации:

  • Длительность в миллисекундах.
  • Функция плавности (<, >, <>, linear).
  • Возможность зацикливания через .loop().

Взаимодействие с событиями

Линии и ломаные можно использовать интерактивно:

polygon.click(function() {
  this.fill({ color: '#f0f' });
});

polyline.mouseover(function() {
  this.stroke({ color: '#f00', width: 4 });
}).mouseout(function() {
  this.stroke({ color: '#0f0', width: 2 });
});

События click, mouseover, mouseout, mousedown, mouseup работают с любыми SVG элементами одинаково.

Советы по производительности

  • Для сложных ломаных с большим количеством точек лучше использовать массивы, а не строки.
  • Замкнутые фигуры polygon рисуются быстрее, чем многократные line или polyline, особенно при анимации.
  • При динамическом обновлении точек используйте метод .plot(), а не создание нового объекта.

Эта часть библиотеки SVG.js позволяет гибко управлять графикой: от простых линий до сложных многоугольников, с поддержкой стилей, анимации и интерактивности. Правильное использование line, polyline и polygon облегчает создание динамических визуальных элементов и эффектов.

Оглавление