Круги и эллипсы

Snap.svg предоставляет мощный и интуитивно понятный интерфейс для работы с элементами SVG, включая круги и эллипсы. Основными методами для создания этих фигур являются circle() и ellipse() объекта Snap.

Круги

Создание круга осуществляется с помощью метода:

var s = Snap(800, 600);
var circle = s.circle(cx, cy, r);
  • cx — координата центра по оси X
  • cy — координата центра по оси Y
  • r — радиус круга

После создания фигура становится объектом Snap, которому можно применять атрибуты и анимации.

Атрибуты круга

Атрибуты задаются методом attr():

circle.attr({
    fill: "#ff0000",   // заливка
    stroke: "#000000", // цвет контура
    strokeWidth: 4     // толщина контура
});

Ключевые атрибуты:

  • fill — цвет заливки или none для прозрачного фона
  • stroke — цвет линии
  • strokeWidth — толщина линии
  • opacity — прозрачность фигуры

Эллипсы

Для создания эллипса используется метод ellipse():

var ellipse = s.ellipse(cx, cy, rx, ry);
  • cx, cy — координаты центра
  • rx — радиус по горизонтальной оси
  • ry — радиус по вертикальной оси

Атрибуты задаются аналогично кругу:

ellipse.attr({
    fill: "#00ff00",
    stroke: "#0000ff",
    strokeWidth: 3
});

Работа с координатами и размерами

Управление положением и размером фигур можно осуществлять через методы transform() и изменения атрибутов:

circle.attr({ cx: 200, cy: 150, r: 80 });
ellipse.attr({ cx: 400, cy: 300, rx: 100, ry: 50 });

Для динамического изменения размеров полезно использовать методы Snap.svg для анимаций:

circle.animate({ r: 120 }, 1000, mina.elastic);
ellipse.animate({ rx: 150, ry: 75 }, 1000, mina.bounce);

Применение градиентов и узоров

Заливка фигур может быть не только однотонной. Snap.svg поддерживает градиенты:

circle.attr({
    fill: s.gradient("r(#ff0000-#0000ff)")
});
  • "r(...)" — радиальный градиент
  • "l(...)" — линейный градиент

Градиенты принимают несколько цветовых остановок через дефис. Для сложных узоров можно использовать <pattern> внутри Snap.

События и интерактивность

Фигуры Snap.svg поддерживают обработку событий:

circle.click(function() {
    this.attr({ fill: "#ffff00" });
});

ellipse.hover(
    function() { this.attr({ strokeWidth: 6 }); },
    function() { this.attr({ strokeWidth: 3 }); }
);
  • click — клик мыши
  • hover — наведение и уход курсора

Группировка и комбинирование фигур

Круги и эллипсы можно объединять в группы с помощью group():

var g = s.group(circle, ellipse);
g.attr({ opacity: 0.8 });

Группа наследует атрибуты и трансформации, позволяя изменять все фигуры одновременно.

Анимации движения и трансформации

Snap.svg позволяет анимировать положение, размеры и трансформации:

circle.animate({ cx: 500, cy: 400 }, 1500, mina.easeinout);
ellipse.animate({ transform: "r45,400,300" }, 1500, mina.linear);
  • transform — вращение, масштабирование, смещение
  • r45,400,300 — вращение на 45° вокруг точки (400,300)

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

Применение масок и клипов

Эллипсы и круги часто используются как маски:

var maskCircle = s.circle(400, 300, 100);
var mask = s.mask(maskCircle);
ellipse.attr({ mask: mask });

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

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

  • Использовать circle() и ellipse() для базовой фигуры
  • Применять attr() для внешнего вида
  • Использовать animate() для динамических изменений
  • Применять градиенты и паттерны для сложной заливки
  • Использовать группы и маски для комплексных сцен
  • Обрабатывать события через click, hover для интерактивности

Такой подход позволяет создавать визуально сложные и интерактивные SVG-композиции, полностью используя возможности Snap.svg.

Оглавление