Базовые примитивы: rect, circle, ellipse

Метод rect(width, height) библиотеки SVG.js создаёт прямоугольник с указанной шириной и высотой. После создания объект можно позиционировать и настраивать его визуальные свойства через цепочку методов.

const draw = SVG().addTo('body').size(500, 500);
const rect = draw.rect(200, 100).move(50, 50).fill('#3498db').stroke({ width: 3, color: '#2980b9' });
  • move(x, y) — устанавливает координаты верхнего левого угла прямоугольника.
  • fill(color) — задаёт заливку фигуры. Можно использовать цветовые строки, градиенты или прозрачность.
  • stroke({ width, color, dasharray }) — задаёт обводку с шириной, цветом и, при необходимости, пунктиром.

Дополнительно можно использовать:

  • radius(rx, ry) — скругление углов. Если передать одно значение, оно применяется ко всем углам одинаково, два значения задают разные радиусы по осям X и Y.
rect.radius(20); // Скругление всех углов на 20px
rect.radius(20, 10); // Скругление: rx=20, ry=10

Создание окружностей с помощью circle

Метод circle(diameter) создаёт окружность с указанным диаметром. Центр окружности задаётся методом center(x, y).

const circle = draw.circle(100).center(200, 200).fill('#e74c3c').stroke({ width: 4, color: '#c0392b' });
  • center(x, y) — устанавливает координаты центра окружности.
  • radius(r) — альтернатива диаметру, позволяет задать радиус вместо полного размера.
  • Можно использовать move(x, y), но тогда координаты будут относиться к верхнему левому углу ограничивающего квадрата.

Особенности окружностей:

  • Объект circle является подтипом <ellipse>, поэтому можно применять методы трансформации и анимации, характерные для эллипсов.
  • При комбинировании с animate() можно создавать плавные анимации изменения радиуса и перемещения центра.
circle.animate(1000).radius(50).center(300, 300);

Эллипсы и их параметры через ellipse

Эллипс создаётся методом ellipse(rx, ry), где rx — радиус по оси X, а ry — по оси Y.

const ellipse = draw.ellipse(150, 100).center(250, 150).fill('#2ecc71').stroke({ width: 2, color: '#27ae60' });
  • center(x, y) — задаёт центр эллипса.
  • rx и ry — радиусы по горизонтали и вертикали.
  • Можно изменить размеры после создания через метод size(width, height), при этом радиусы пересчитаются автоматически.
ellipse.size(200, 120); // Изменяет ширину и высоту эллипса

Общие методы для примитивов

Все базовые примитивы (rect, circle, ellipse) поддерживают общие методы библиотеки SVG.js:

  • fill(color) — задаёт цвет или градиент заливки.
  • stroke({ width, color, linecap, linejoin }) — настройка обводки.
  • move(x, y) и center(x, y) — позиционирование элементов.
  • size(width, height) — изменение размеров (для окружностей и эллипсов пересчитывает радиусы).
  • animate(duration, ease) — анимация изменений свойств фигуры.

Примеры анимации:

rect.animate(1500, '<>').move(300, 50).fill('#f1c40f');
ellipse.animate(1000).size(250, 150).stroke({ color: '#16a085' });
circle.animate(2000).radius(80).center(400, 400);

Важные особенности и оптимизация работы с примитивами

  1. Система координат — все примитивы используют SVG-координаты, где (0,0) находится в левом верхнем углу контейнера.
  2. Преобразования — можно применять rotate(angle, cx, cy), scale(sx, sy) и translate(dx, dy) к любому примитиву.
  3. Группировка — примитивы удобно объединять с помощью group(), чтобы применять трансформации и стили ко всем элементам одновременно.
  4. События — можно привязать события click, mouseover, mouseout для интерактивности.
rect.click(() => alert('Прямоугольник нажат'));
circle.hover(() => circle.fill('#9b59b6'), () => circle.fill('#e74c3c'));

Рекомендации по стилю и производительности

  • Для сложных сцен с множеством примитивов рекомендуется использовать группы (group()) и заранее задавать общие стили через attr() или fill/stroke.
  • Минимизировать количество отдельной анимации на каждый примитив, комбинировать их через цепочку анимаций или GSAP при интеграции.
  • Прямоугольники с большими радиусами углов лучше создавать с использованием rect().radius(rx, ry) вместо ручного округления через кривые, это упрощает код и повышает читаемость.

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

Оглавление