Методы Element

В Snap.svg каждый графический объект представлен Element. Элемент создаётся через методы библиотеки, такие как paper.circle(), paper.rect(), paper.path() и другие. После создания объект автоматически становится частью SVG-документа, связанного с холстом Snap.

Пример создания круга:

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

Каждый элемент предоставляет методы для управления атрибутами, стилями и поведением.

Методы для работы с атрибутами

.attr() — основной метод для получения и установки атрибутов элемента.

  • Получение атрибута:
var fillColor = circle.attr("fill"); // "#3498db"
  • Установка одного атрибута:
circle.attr("stroke", "#e74c3c");
  • Установка нескольких атрибутов сразу с помощью объекта:
circle.attr({
    fill: "#2ecc71",
    stroke: "#27ae60",
    strokeWidth: 6
});

Особенности метода .attr():

  • Поддерживает любые SVG-атрибуты: x, y, r, width, height, d (для path).
  • Может использоваться для пользовательских данных через data- атрибуты.

Методы трансформации

.transform() позволяет применять к элементу комплексные трансформации. Поддерживаются следующие операции:

  • tX,Y — перенос (translate)
  • rУ, X, Y — вращение (rotate) вокруг точки (X, Y)
  • sX,Y, X, Y — масштабирование (scale) относительно точки (X, Y)
  • mA,B,C,D,E,F — матричная трансформация

Пример последовательного применения трансформаций:

circle.transform("t200,50r45,100,100s1.5,1.5");

Метод также поддерживает получение текущих трансформаций элемента:

var currentTransform = circle.transform().localMatrix;

Методы для управления DOM-структурой

.append() и .prepend() добавляют элементы внутрь контейнера:

var group = s.group();
group.append(circle); // Добавление в конец группы

.appendTo() и .prependTo() вставляют элемент в другой контейнер напрямую:

circle.appendTo(group);

.remove() полностью удаляет элемент из DOM:

circle.remove();

.clear() удаляет все дочерние элементы контейнера:

group.clear();

Методы управления размерами и позиционированием

  • .getBBox() возвращает объект с полями x, y, width, height, cx, cy:
var bbox = circle.getBBox();
console.log(bbox.cx, bbox.cy); // координаты центра

  • .getCTM() — получение матрицы текущей трансформации. Используется для точного позиционирования относительно других элементов.

  • .getBBox(true) — возвращает bounding box с учётом трансформаций.

Методы для работы с содержимым элементов

  • .attr("text") для текстовых элементов: получение и установка текста.

  • .select() и .selectAll() — поиск элементов внутри контейнера:

var textElement = s.select("text");
var allRects = s.selectAll("rect");
  • .clone() создаёт полную копию элемента с сохранением всех атрибутов:
var circleClone = circle.clone();
circleClone.transform("t100,0");

Методы анимации

  • .animate(attrs, duration, easing, callback) — плавное изменение атрибутов:
circle.animate({ r: 80, fill: "#e67e22" }, 1000, mina.easeinout, function() {
    console.log("Анимация завершена");
});

  • .stop() — останавливает текущую анимацию элемента.

  • .toFront() и .toBack() — управление порядком отображения:

circle.toFront(); // Перемещает элемент выше всех
circle.toBack();  // Перемещает элемент на задний план
  • .insertBefore() и .insertAfter() позволяют вставлять элемент перед или после другого элемента.

Методы работы с группами

Группы (group) в Snap.svg — это контейнеры, которые позволяют управлять несколькими элементами как единым целым.

  • .add() — добавляет элемент в группу.
  • .forEach(callback) — выполняет функцию для каждого дочернего элемента:
group.forEach(function(el) {
    el.attr({ stroke: "#c0392b" });
});
  • .exclude() — удаляет элемент из группы без удаления его из DOM.

Методы хранения пользовательских данных

  • .data(key, value) — установка пользовательских данных:
circle.data("id", 123);
  • .data(key) — получение данных:
var id = circle.data("id"); // 123
  • .removeData(key) — удаление данных по ключу.

Методы для событий

Элементы Snap.svg поддерживают стандартные события:

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

circle.hover(
    function() { this.attr({ strokeWidth: 8 }); },
    function() { this.attr({ strokeWidth: 4 }); }
);
  • .drag(onMove, onStart, onEnd) — позволяет реализовать перетаскивание элементов:
circle.drag(
    function(dx, dy) { this.attr({ cx: this.data("ox")+dx, cy: this.data("oy")+dy }); },
    function() { this.data("ox", this.attr("cx")); this.data("oy", this.attr("cy")); },
    function() { console.log("Перетаскивание завершено"); }
);

Методы работы с видимостью и стилями

  • .hide() и .show() — простое управление видимостью элемента.
  • .attr("display", "none") и .attr("display", "block") — управление через атрибут SVG.
  • .addClass(), .removeClass(), .hasClass() — работа с CSS-классами.

Методы работы с clipPath и масками

  • .attr({ clipPath: path }) — задаёт маску для элемента.
  • .mask() — применяет маску к элементу, которая может быть другим элементом Snap.svg.

Методы для группировки и упорядочивания элементов

  • .parent() — возвращает родительский контейнер.
  • .children() — возвращает все дочерние элементы.
  • .next() и .prev() — соседние элементы в DOM-структуре SVG.

Snap.svg предоставляет гибкий набор методов для каждого элемента, позволяя полностью контролировать атрибуты, трансформации, анимации, события, структуру и визуальное оформление. Владение методами Element — ключ к созданию сложных и интерактивных SVG-композиций в JavaScript.

Оглавление