Видимость элементов

SVG.js предоставляет удобные инструменты для управления видимостью и отображением объектов SVG. Основными свойствами, которые отвечают за видимость, являются visible, opacity, а также методы работы с атрибутом display и CSS-классами.

Свойство visible

Свойство visible позволяет быстро скрывать или показывать элемент:

const rect = draw.rect(100, 100).fill('#f06');
rect.visible(false); // элемент скрыт
rect.visible(true);  // элемент отображается
  • true — элемент отображается на холсте.
  • false — элемент становится невидимым, но остаётся в DOM и участвует в вычислениях.

Использование visible полезно, когда нужно временно скрывать объект без удаления его из дерева SVG.

Атрибут display

Метод attr позволяет напрямую управлять CSS-атрибутом display:

rect.attr({ display: 'none' });  // скрыть элемент
rect.attr({ display: 'block' }); // показать элемент

Особенность display: none в том, что элемент полностью исключается из визуального потока и не занимает места, а visible(false) оставляет его место, если элемент участвует в компоновке, например, при использовании группы <g>.

Свойство opacity

Для постепенного скрытия или прозрачности используется opacity:

rect.opacity(0); // полностью прозрачный
rect.opacity(0.5); // полупрозрачный
rect.opacity(1); // полностью видимый
  • Значение 0 делает элемент невидимым, но он по-прежнему реагирует на события.
  • Значение 1 — элемент полностью видим.

Использование opacity удобно для создания анимаций появления и исчезания объектов.

Методы hide() и show()

SVG.js предоставляет удобные методы hide() и show(), которые являются обёртками над управлением видимостью:

rect.hide(); // скрывает элемент
rect.show(); // показывает элемент

Методы автоматически корректно обрабатывают атрибуты display и visibility, что позволяет избегать прямой работы с CSS в большинстве случаев.

Управление видимостью групп элементов

Если элементы объединены в группу <g>, можно управлять их видимостью централизованно:

const group = draw.group();
const circle = group.circle(50).fill('#0f0');
const square = group.rect(60, 60).fill('#00f');

group.hide(); // скрываются все элементы группы
group.show(); // отображаются снова

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

Плавная анимация видимости

Для создания эффектов появления и исчезания применяется метод animate():

rect.animate(500).opacity(0);  // плавное исчезновение за 0.5 секунды
rect.animate(500).opacity(1);  // плавное появление

Можно комбинировать с hide() после завершения анимации для полного исключения элемента из визуального потока:

rect.animate(500).opacity(0).after(() => rect.hide());

Комбинирование методов

Часто для оптимального контроля видимости используют комбинацию visible, opacity и display:

rect.visible(false).opacity(0).attr({ display: 'none' });

Такой подход позволяет скрывать элемент, делать его полностью прозрачным и исключать из потока DOM, обеспечивая максимальную гибкость.

Практические рекомендации

  • Использовать visible(false) для временного скрытия объектов без удаления из DOM.
  • opacity применять для анимаций и плавного изменения прозрачности.
  • display: none и hide() применять, когда нужно полностью исключить элемент из визуального потока.
  • Для групп лучше управлять видимостью на уровне группы, чтобы сохранить структуру и анимации всех внутренних элементов.

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

Оглавление