<< Click to Display Table of Contents >> Navigation:  Создание окон для клиента визуализации > Рекомендации по созданию окон > Динамизация SVG элементов > Практические сценарии динамизации > Переключение состояний SVG > Создание Фланцев

Cоздадим Фланцы как отдельную фигуру и как компонент для остальных SVG. Ниже приведён пример из графического редактора Figma:

Фланцы в качестве отдельной фигуры создавать необязательно. В данном сценарии фигура Фланцы нужна для того, чтобы использовать их без трубы (в случае необходимости).

a.Отдельная фигура Фланцы:

I.Создадим прямоугольник 12x40. Заливка фона по умолчанию #929292:

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

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

III.Создадим два прямоугольника 4x40, каждый из которых разместим над серым прямоугольником и над слоем с непрозрачностью:

IV.С помощью новых серых прямоугольников 4x40 выполним Boolean-операцию вычитания (Subtract selection):

V.Перемещаем слой непрозрачности на серый прямоугольник:

VI.Между двух прямоугольников добавим новый с заливкой 4x28, который в будущем будет менять цвет. Цвет заливки выставим #929292:

В качестве ориентира назовём данную фигуру "change_color".

VII.Обязательно нужно "сгладить" прямоугольник 4x28, чтобы в SVG он из тега <rect> трансформировался в <path>:

•Данная операция в Figma называется Flatten:

•В Inkscape Сгладить:

•В Adobe Illustrator называется Создать составной контур (Make Compound Path):

VIII. Отдельная фигура Фланцы готова. Сгруппируем все элементы и назовём "flansch":

b.Сделаем составную фигуру Фланцы, которую будем использовать внутри труб:

Данные Фланцы отличаются только наличием прямоугольника "change_color".

Переименуем фигуру в "item_flansch":

Все Фланцы готовы, теперь приступим к созданию Горизонтальной трубы.