Углы и скругления

Скругленные прямоугольники

В SVG.js создание прямоугольника с закруглёнными углами выполняется через метод rect() с последующим использованием radius(). Параметр радиуса может быть единым для всех углов или задан отдельно по осям X и Y.

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

let rect = draw.rect(200, 100).fill('#3498db').radius(20);

В примере выше создаётся прямоугольник шириной 200px и высотой 100px с радиусом закругления 20px на всех углах. Для задания раздельного радиуса по осям X и Y:

rect.radius(20, 10); // 20px по X, 10px по Y

Скругление отдельных углов

SVG.js предоставляет возможность скруглять отдельные углы прямоугольника через объект rx и ry при атрибутах attr(). Однако для этого потребуется манипуляция атрибутами d или использование сторонних плагинов, так как базовая библиотека применяет радиус ко всем углам одинаково.

rect.attr({
  rx: 30, // горизонтальное скругление
  ry: 10  // вертикальное скругление
});

Скругления для кругов и эллипсов

Круги и эллипсы создаются методами circle() и ellipse(). Их радиус определяется напрямую:

let circle = draw.circle(100).fill('#e74c3c'); // Радиус = 50px
let ellipse = draw.ellipse(150, 100).fill('#2ecc71'); // rx = 75px, ry = 50px

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

Скругленные линии и пути

Для линий и сложных кривых используется объект path(). Скругление углов между сегментами пути достигается через команды кривых Безье и арки.

let path = draw.path('M10 80 Q 95 10 180 80 T 330 80').fill('none').stroke({ width: 4, color: '#000' });

Здесь Q задаёт квадратичную кривую Безье, которая создаёт плавное соединение между точками. Для более сложных скруглений можно использовать метод curve() при работе с многоугольниками или полилиниями.

Скругление многоугольников

SVG.js позволяет скруглять вершины многоугольников через метод plot() совместно с генерацией кривых Безье:

let points = [[50,50],[150,50],[150,150],[50,150]];
let smoothPoints = SVG.utils.curve(points, 0.3); // 0.3 – коэффициент скругления
draw.polygon(smoothPoints).fill('#f1c40f');

Метод SVG.utils.curve() автоматически вычисляет контрольные точки для плавного перехода между вершинами, создавая эффект скругления.

Использование атрибутов stroke-linejoin и stroke-linecap

Для визуального сглаживания углов линий и полилиний важны SVG-атрибуты stroke-linejoin и stroke-linecap:

draw.line(50, 50, 150, 50, 150, 150)
  .stroke({ width: 10, color: '#8e44ad', linecap: 'round', linejoin: 'round' });
  • linejoin: 'round' – скругляет углы соединений сегментов.
  • linecap: 'round' – скругляет концы отдельных сегментов линии.

Анимация скруглений

SVG.js поддерживает анимацию радиусов и углов через метод animate():

rect.animate(1000, '<>').radius(50); // плавное увеличение скругления за 1 секунду

Можно комбинировать с другими анимациями, например, изменением размеров или позиции, для создания динамических эффектов:

rect.animate(1500, '<>').move(100, 200).radius(30).fill({ color: '#1abc9c' });

Итоговые рекомендации по скруглениям

  • Для простых прямоугольников и эллипсов использовать методы radius() и rx/ry.
  • Для линий и полилиний применять stroke-linejoin и stroke-linecap.
  • Для сложных фигур с индивидуальными скруглениями использовать кривые Безье и утилиты SVG.utils.curve().
  • Анимация скруглений делает интерфейсы более живыми, но требует синхронизации с другими трансформациями для плавности.

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

Оглавление