Геттеры и сеттеры

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

Геттеры

Геттеры в SVG.js используются для получения текущих значений свойств элементов. Практически каждый атрибут SVG-объекта можно прочитать через соответствующий метод.

Примеры основных геттеров:

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 50).attr({ fill: '#f06' });

// Получение ширины и высоты
let width = rect.width();   // 100
let height = rect.height(); // 50

// Получение цвета заливки
let fillColor = rect.fill(); // '#f06'

// Получение позиции элемента
let xPos = rect.x(); // 0
let yPos = rect.y(); // 0

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

Сеттеры

Сеттеры позволяют изменять свойства элементов. В SVG.js они реализованы как методы, которые принимают значение для установки и возвращают сам объект для цепочного вызова методов.

Примеры основных сеттеров:

rect.width(150).height(80); // Изменение размеров
rect.fill('#0f9').stroke({ width: 2, color: '#000' }); // Изменение цвета заливки и обводки
rect.move(50, 100); // Изменение позиции элемента

Сеттеры могут работать с одиночными значениями или объектами, содержащими несколько параметров:

rect.attr({ rx: 10, ry: 10 }); // Закругление углов прямоугольника
rect.transform({ rotate: 45, cx: 50, cy: 50 }); // Поворот элемента

Цепочка методов (Chaining)

Одним из ключевых преимуществ использования геттеров и сеттеров в SVG.js является возможность цепного вызова методов, что упрощает код и повышает читаемость.

rect
  .move(30, 40)
  .size(120, 60)
  .fill('#ff0')
  .stroke({ width: 3, color: '#333' });

Работа с текстом и шрифтом

Методы-геттеры и сеттеры распространяются и на текстовые элементы SVG. Основные свойства текста включают font-size, font-family, text-anchor, fill.

const text = draw.text('SVG.js Example').move(20, 20);

// Получение текущего размера шрифта
let fontSize = text.font('size'); // Возвращает число

// Изменение параметров шрифта
text.font({ family: 'Arial', size: 24, anchor: 'middle' }).fill('#333');

Метод font() служит одновременно геттером и сеттером: без аргументов возвращает объект со всеми параметрами, с объектом в аргументе — устанавливает значения.

Специфические свойства: трансформации и координаты

SVG.js предоставляет методы для работы с геометрией и трансформациями, которые объединяют геттеры и сеттеры:

  • move(x, y) — установка позиции элемента. Возвращает объект для цепочки.
  • x() / y() — получение текущих координат.
  • center(cx, cy) — установка центра элемента.
  • cx() / cy() — получение координат центра.
  • rotate(angle, cx, cy) — вращение относительно точки.
  • scale(sx, sy, cx, cy) — масштабирование.

Пример:

rect.move(50, 50).rotate(30, 100, 100).scale(1.5, 1.5);

Универсальный метод attr()

Метод attr() — мощный инструмент для работы с атрибутами SVG.

  • Геттер: element.attr('attributeName')
  • Сеттер: element.attr({ attr1: value1, attr2: value2 })

Примеры:

let currentFill = rect.attr('fill'); // Получение заливки
rect.attr({ fill: '#00f', stroke: '#000', 'stroke-width': 2 }); // Установка нескольких атрибутов

Использование attr() полезно для работы с атрибутами, не покрытыми отдельными методами библиотеки, например clip-path, mask, filter.

Геттеры и сеттеры для сложных элементов

SVG.js поддерживает работу с группами, контейнерами и кривыми. Методы-геттеры и сеттеры сохраняют одинаковый принцип:

  • Для групп (group()) методы .move(), .size(), .attr() применяются к группе целиком.
  • Для кривых и полилиний (polyline(), path()) доступны .plot() для сеттера и .array() для получения координат.

Пример:

const line = draw.line(0, 0, 100, 100);
line.plot([[0,0],[50,50],[100,100]]); // Сеттер
let points = line.array(); // Геттер

Особенности использования

  • Геттеры обычно возвращают примитивные значения или объекты, сеттеры — сам объект для цепочки.
  • Большинство методов работают и как геттер, и как сеттер при разной сигнатуре вызова.
  • Использование объектов для установки нескольких атрибутов сокращает код и упрощает поддержку.

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

Оглавление