Установка атрибутов через attr()

Метод attr() является универсальным инструментом для работы с атрибутами SVG-элементов. Он позволяет читать, устанавливать и массово изменять атрибуты графических объектов. В Snap.svg этот метод применяется как к отдельным элементам, так и к группам элементов.

Синтаксис метода:

element.attr(attributeName, value);
element.attr({ attribute1: value1, attribute2: value2, ... });
element.attr(attributeName);
  • attributeName — имя атрибута SVG (например, fill, stroke, stroke-width, x, y).
  • value — значение атрибута. Может быть строкой, числом, цветом в формате #RRGGBB, RGB или именем цвета.
  • Если вызывается без value, метод возвращает текущие значения атрибутов.

Чтение атрибутов

Для получения значения атрибута используется вызов с одним аргументом:

var fillColor = circle.attr("fill");
console.log(fillColor); // Например, "#ff0000"

Можно одновременно получить несколько атрибутов, передав массив:

var attrs = circle.attr(["fill", "stroke", "r"]);
console.log(attrs); // {fill: "#ff0000", stroke: "#000000", r: 50}

Особенности:

  • Если атрибут не установлен явно, Snap.svg вернёт null или значение по умолчанию SVG.
  • Метод возвращает значения уже приведённые к строковому формату, независимо от того, как они были установлены.

Установка одного атрибута

Для изменения одного атрибута достаточно передать имя и значение:

circle.attr("fill", "#00ff00");  // Задаёт зелёный цвет заливки
rect.attr("stroke-width", 5);    // Устанавливает толщину обводки в 5 пикселей

Важно понимать, что несуществующие атрибуты автоматически создаются, если SVG их поддерживает.

Массовое изменение атрибутов

Snap.svg позволяет изменять сразу несколько атрибутов с помощью объекта:

circle.attr({
    fill: "blue",
    stroke: "black",
    strokeWidth: 2
});

Преимущества такого подхода:

  • Удобство при работе с множеством атрибутов.
  • Возможность динамически формировать объект атрибутов в зависимости от условий.
  • Повышение читаемости кода и уменьшение количества вызовов attr().

Работа с трансформациями через attr()

Метод attr() поддерживает атрибут transform, который применяется для поворота, масштабирования, сдвига и наклона элементов:

rect.attr({
    transform: "rotate(45 50 50) scale(1.5)"
});
  • rotate(angle cx cy) — поворот на angle градусов вокруг точки (cx, cy).
  • scale(sx sy) — масштабирование по горизонтали sx и вертикали sy. Если sy не указан, используется sx.
  • translate(dx dy) — сдвиг на dx и dy пикселей.

Особенности:

  • Трансформации применяются относительно текущего состояния элемента, если использовать element.transform(); через attr() значение перезаписывает текущую трансформацию.
  • Для сложных анимаций рекомендуется комбинировать attr({ transform }) с методами анимации Snap.svg.

Атрибуты стиля и CSS

Помимо стандартных атрибутов SVG, через attr() можно изменять CSS-подобные свойства, такие как:

text.attr({
    "font-size": 24,
    "font-family": "Arial",
    "text-anchor": "middle",
    "fill": "#333"
});

Особенности:

  • Имена CSS-атрибутов в attr() используют формат с дефисами (font-size), а не camelCase.
  • Snap.svg автоматически конвертирует числовые значения в строки там, где требуется.

Динамическое управление атрибутами

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

circle.attr({
    r: function(i) { return 20 + i * 5; },
    fill: function() { return Math.random() > 0.5 ? "red" : "green"; }
});
  • Функция получает индекс элемента в коллекции, если метод применяется к множеству элементов.
  • Возвращаемое значение функции становится новым значением атрибута.

Атрибуты пользовательских данных

Snap.svg поддерживает хранение произвольных данных через data():

circle.attr({ "data-id": 123, "data-type": "highlight" });
console.log(circle.attr("data-id")); // 123
  • Пользовательские данные полезны для связывания SVG-элементов с логикой приложения.
  • Атрибуты data-* полностью совместимы с HTML5 и SVG спецификацией.

Особенности и подводные камни

  1. Тип значения — Snap.svg приводит все значения к строкам. Например, strokeWidth: 3 будет "3".
  2. Существующие атрибуты — вызов attr() с объектом полностью перезаписывает указанные атрибуты, но не затрагивает другие.
  3. Неподдерживаемые атрибуты — будут проигнорированы, без выброса ошибки.
  4. Стили и атрибуты одновременно — атрибуты через attr() имеют приоритет над inline CSS, но уступают !important в стилях.

Метод attr() является фундаментальным инструментом Snap.svg, обеспечивая гибкое управление внешним видом и поведением SVG-элементов. Его универсальность проявляется как при простых изменениях одного атрибута, так и при сложных динамических трансформациях и генерации интерактивной графики.

Оглавление