Команды перемещения

Snap.svg предоставляет мощный API для работы с элементами SVG в браузере. Основной объект для взаимодействия — это экземпляр Snap, который создаёт холст SVG и позволяет добавлять на него элементы.

var s = Snap("#svg"); // создание объекта Snap для элемента <svg id="svg">

Все элементы создаются через методы circle, rect, ellipse, path, line, polygon и text. Каждый элемент возвращает объект Snap, который поддерживает дальнейшие трансформации.

var circle = s.circle(50, 50, 40); // x, y, радиус
circle.attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 3
});

Перемещение элементов: методы transform и attr

Snap.svg использует матрицы трансформаций для управления положением элементов. Основные способы перемещения:

1. Абсолютное позиционирование через атрибуты

Для простых элементов, таких как circle или rect, координаты можно менять напрямую через attr:

circle.attr({ cx: 100, cy: 100 });

Для прямоугольника rect координаты задаются через x и y:

var rect = s.rect(10, 10, 80, 50);
rect.attr({ x: 50, y: 70 });

2. Перемещение через transform

Метод transform позволяет применять комплексные трансформации:

circle.transform("t50,50"); // t = translate
  • t[x,y] — смещение по x и y.
  • r[angle,x,y] — вращение вокруг точки (x, y).
  • s[scaleX, scaleY,x,y] — масштабирование с центром в точке (x, y).
  • m[a,b,c,d,e,f] — произвольная матрица трансформации.

Трансформации могут комбинироваться:

circle.transform("t50,50 r45 100 100 s2,2 50 50");

Важно: при многократном применении transform предыдущие значения заменяются. Для сложных анимаций часто используют метод transform().localMatrix или функции Snap.Matrix.

3. Использование метода translate

Snap.svg предоставляет удобный метод translate для перемещения:

circle.animate({ transform: "t100,0" }, 1000, mina.easeinout);

mina — встроенный набор функций анимации. Метод animate плавно перемещает объект, а строка "t100,0" задаёт смещение по x.

Манипуляции с группами элементов

Для управления несколькими объектами одновременно используется group:

var g = s.group(circle, rect);
g.transform("t50,50");

Вся группа перемещается как единое целое, сохраняя относительное положение объектов внутри.

Метод getBBox для вычисления координат

Часто необходимо получить текущие координаты элемента. Snap.svg предоставляет метод getBBox, который возвращает объект с координатами и размерами:

var bbox = rect.getBBox();
console.log(bbox.x, bbox.y, bbox.width, bbox.height);

Эти значения полезны для расчёта смещений и центрирования элементов.

Инкрементальное перемещение

Для пошагового смещения удобно использовать текущее положение и добавлять смещение:

var dx = 20, dy = 10;
var cx = circle.attr("cx");
var cy = circle.attr("cy");
circle.attr({ cx: cx + dx, cy: cy + dy });

Для элементов с трансформациями:

var m = circle.transform().localMatrix;
m.translate(20, 10);
circle.transform(m);

Привязка к событиям

Перемещение элементов можно комбинировать с событиями мыши:

circle.drag(
    function(dx, dy) { this.transform(`t${dx},${dy}`); }, // onmove
    function() { console.log("drag start"); },             // onstart
    function() { console.log("drag end"); }                // onend
);

Метод drag делает элемент интерактивным, автоматически вычисляя смещения.

Тонкости работы с координатами

  • attr изменяет координаты в локальной системе элемента.
  • transform действует в глобальной системе SVG, комбинируя предыдущие трансформации.
  • Для точного позиционирования часто используется комбинация getBBox + transform.

Анимация перемещений

Snap.svg позволяет плавно перемещать элементы с помощью animate:

circle.animate({ transform: "t200,150" }, 1500, mina.bounce);

Функция mina.bounce создаёт эффект «прыжка» при движении. Можно комбинировать смещение с вращением и масштабированием:

circle.animate({ transform: "t100,50 r90 75 75 s1.5,1.5 75 75" }, 2000, mina.easeinout);

Практические советы

  • Для сложных перемещений лучше использовать группы.
  • Для интерактивных перемещений важно учитывать текущую трансформацию через localMatrix.
  • Анимации работают плавно, если использовать функции mina.
  • Всегда проверять координаты через getBBox, особенно при комбинировании attr и transform.

Методы перемещения Snap.svg позволяют создавать как статические, так и динамические композиции, обеспечивая полный контроль над положением и трансформацией элементов SVG.

Оглавление