Inline-стили через SVG.js

SVG.js предоставляет гибкий и мощный механизм для работы с атрибутами и стилями элементов SVG. Одним из ключевых инструментов является управление inline-стилями, что позволяет задавать CSS-свойства непосредственно на элементе через JavaScript, без использования внешних стилей.

Основные методы работы со стилями

В SVG.js для управления стилями применяются методы .style() и .attr(). Отличие заключается в том, что .style() оперирует CSS-свойствами, тогда как .attr() — атрибутами SVG.

Пример установки отдельных стилей:

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).move(50, 50);

rect.style('fill', 'red');       // задаём цвет заливки
rect.style('stroke', 'black');   // задаём цвет обводки
rect.style('stroke-width', 5);   // задаём толщину обводки

Метод .style() позволяет передавать объект, что удобно при применении множества стилей одновременно:

rect.style({
  fill: 'blue',
  stroke: 'orange',
  'stroke-dasharray': '5,5',
  opacity: 0.7
});

Динамическое изменение стилей

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

rect.on('mouseover', () => {
  rect.style('fill', 'green');
});

rect.on('mouseout', () => {
  rect.style('fill', 'blue');
});

Также можно использовать метод .animate() в сочетании с .style() для плавного изменения свойств:

rect.animate(1000, '<>').style({ fill: 'yellow', opacity: 1 });

Чтение и проверка inline-стилей

Чтобы получить текущее значение CSS-свойства, используется метод .style() в режиме чтения:

const fillColor = rect.style('fill'); // 'yellow'
const strokeWidth = rect.style('stroke-width'); // 5

Метод возвращает строку для всех свойств CSS, даже если значение задано числом через .style().

Использование CSS-переменных

SVG.js поддерживает работу с CSS-переменными, что открывает возможности для создания тем и динамических эффектов:

rect.style('--main-color', 'purple');
rect.style('fill', 'var(--main-color)');

Изменение значения переменной автоматически меняет все элементы, использующие её.

Управление набором стилей

Методы .styles() и .style() с объектом позволяют полностью управлять набором свойств:

rect.styles({
  fill: 'pink',
  stroke: 'black',
  'stroke-width': 3,
  opacity: 0.8
});

Удалить inline-стиль можно с помощью метода .style() с null:

rect.style('fill', null); // убирает заливку

Влияние inline-стилей на наследование

Inline-стили имеют высший приоритет по сравнению с классами и внешними стилями. Это значит, что:

rect.addClass('highlight');
rect.style('fill', 'red'); // перезаписывает fill из класса 'highlight'

Работа с трансформациями через inline-стили

SVG.js позволяет использовать CSS-свойства для трансформаций:

rect.style('transform', 'rotate(45deg)');

Однако для анимаций трансформаций рекомендуется использовать метод .transform(), так как он учитывает внутренние координаты SVG:

rect.transform({ rotate: 45, cx: 100, cy: 100 });

Сочетание атрибутов и стилей

Некоторые свойства в SVG лучше задавать через .attr(), например viewBox, width, height, а визуальные стили — через .style().

draw.viewbox(0, 0, 200, 200);
rect.attr({ rx: 10, ry: 10 }); // скругление углов
rect.style({ fill: 'teal', stroke: 'black' });

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

  • Для анимаций цвета и прозрачности лучше использовать .style() и .animate().
  • Для размеров, положения и формы элементов использовать .attr().
  • Inline-стили удобны для быстрого прототипирования, но при больших проектах лучше комбинировать их с CSS-классами для управления темами и поддерживаемостью кода.
  • При необходимости массового изменения стилей применяются массивы элементов с методом .each():
draw.select('rect').each(function() {
  this.style('stroke', 'red');
});

Эта возможность позволяет быстро применять стили к множеству элементов одновременно.

Интеграция с внешними библиотеками

SVG.js совместим с большинством библиотек анимации и визуализации, включая GSAP и Anime.js. Inline-стили служат удобным посредником между JavaScript-анимацией и SVG, позволяя плавно управлять свойствами через методы .style() и .animate().

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

Хотите, чтобы я добавил этот раздел?

Оглавление