Создание окон для клиента визуализации > Рекомендации по созданию окон > Динамизация SVG элементов > Практические сценарии динамизации

Сценарий: Использовать CSS свойство display: none и display: block для переключения состояний в SVG.

Ссылка на ресурсы документации: https://disk.yandex.ru/d/YkDc6mWTXxnPOw

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

Небольшое описание:

•Для SVG необходимо создать 5 фигур: Четверник, тройник, горизонтальную и угловую трубу и фланцы.

svg_scenarii_perekluchenie_1

Примечание: Не обязательно создавать развёрнутый дубликат под каждую фигуру, как это сделано сейчас в палитре MasterSCADA 4D:

svg_scenarii_perekluchenie_2

Для поворота воспользуемся инструментами MasterSCADA 4D в верхней панели инструментов:

svg_scenarii_perekluchenie_3

•Далее нужно разместить все готовые фигуры в одну SVG и создать динамизацию с помощью XML, чтобы с помощью выпадающего списка отображать ту или иную фигуру.

svg_scenarii_perekluchenie_4

•Также воспользуемся сценарием из раздела Имитация градиента при помощи слоя непрозрачности, чтобы можно было изменить цвет трубы.

svg_scenarii_perekluchenie_5

Сценарий:

1.Создадим и разместим фигуры:

a.Создание Фланцев;

b.Создание Горизонтальной трубы;

c.Создание Тройника;

d.Создание Четверника;

e.Создание Четверти круга.

f.Объединим все фигуры в одну:

svg_scenarii_perekluchenie_89

g.Назовем группу "pipeline_icon":

svg_scenarii_perekluchenie_90

h.SVG готов. При экспорте из Figma следует активировать чекбокс Include 'id' attribute. Данный чекбокс при экспорте выставит id всем SVG элементам.

2.Откроем код SVG:

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</radialGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

3.Первым этапом подготовки SVG нужно с помощью CSS настроить отображение той или иной фигуры.

Как по итогу данный подход будет работать в SVG?

Пример: У нас есть три фигуры А, Б и В. Нужно отображать конкретную фигуру.

Чтобы этого добиться нужно создать селектор CSS следующим образом:

a.Пришел сигнал показать фигуру А:

•Фигуру А - показать.

•Фигуру Б - скрыть.

•Фигуру В - скрыть.

b.Пришел сигнал показать фигуру Б:

•Фигуру А - скрыть.

•Фигуру Б - показать.

•Фигуру В - скрыть.

c.Пришел сигнал показать фигуру В:

•Фигуру А - скрыть.

•Фигуру Б - скрыть.

•Фигуру В - показать.

То есть в CSS при каждом сигнале необходимо указывать, какие фигуры скрыть, а какие показать.

4.Добавим в SVG тег style с экранированием CDATA:

/* Здесь ваш CSS код */

]]>

</style>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</radialGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

5.Пример настройки SVG для отображения одной фигуры:

В качестве механики скрыть/показать воспользуемся свойством CSS display (none - скрыть слой, block - показать).

Важно! Обычно нужно избегать совпадений имен класса и id для лучшей читаемости кода, но в SVG-компонентах это является полезным исключением. Когда класс на родителе (.flansch) используется как переключатель состояния, а id (#flansch) для выбора соответствующего элемента, код становится более наглядным и понятным, явно показывая связь между состоянием компонента и элементом, который нужно показать.

Аналогичным образом настраиваем отображение каждой фигуры при появлении селекторов horizontal, tee, quad, quarter_circle:

/* Состояние SVG при выборе flansch */

#pipeline_icon.flansch #flansch{

display: block;

}

#pipeline_icon.flansch #horizontal{

display: none;

}

#pipeline_icon.flansch #tee{

display: none;

}

#pipeline_icon.flansch #quad{

display: none;

}

#pipeline_icon.flansch #quarter_circle{

display: none;

}

/* Состояние SVG при выборе horizontal */

#pipeline_icon.horizontal #flansch{

display: none;

}

#pipeline_icon.horizontal #horizontal{

display: block;

}

#pipeline_icon.horizontal #tee{

display: none;

}

#pipeline_icon.horizontal #quad{

display: none;

}

#pipeline_icon.horizontal #quarter_circle{

display: none;

}

/* Состояние SVG при выборе tee */

#pipeline_icon.tee #flansch{

display: none;

}

#pipeline_icon.tee #horizontal{

display: none;

}

#pipeline_icon.tee #tee{

display: block;

}

#pipeline_icon.tee #quad{

display: none;

}

#pipeline_icon.tee #quarter_circle{

display: none;

}

/* Состояние SVG при выборе quad */

#pipeline_icon.quad #flansch{

display: none;

}

#pipeline_icon.quad #horizontal{

display: none;

}

#pipeline_icon.quad #tee{

display: none;

}

#pipeline_icon.quad #quad{

display: block;

}

#pipeline_icon.quad #quarter_circle{

display: none;

}

/* Состояние SVG при выборе quarter_circle */

#pipeline_icon.quarter_circle #flansch{

display: none;

}

#pipeline_icon.quarter_circle #horizontal{

display: none;

}

#pipeline_icon.quarter_circle #tee{

display: none;

}

#pipeline_icon.quarter_circle #quad{

display: none;

}

#pipeline_icon.quarter_circle #quarter_circle{

display: block;

}

]]>

</style>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</radialGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

6.Теперь настроим слой заливки. Для этого в коде нужно найти слой "change_color". Но после экспорта к данному слою добавились суффиксы "_2", "_3", "_4", "_5":

svg_scenarii_perekluchenie_91

И все данные id нужно переименовать в "change_color" без суффиксов:

/* Состояние SVG при выборе flansch */

#pipeline_icon.flansch #flansch{

display: block;

}

#pipeline_icon.flansch #horizontal{

display: none;

}

#pipeline_icon.flansch #tee{

display: none;

}

#pipeline_icon.flansch #quad{

display: none;

}

#pipeline_icon.flansch #quarter_circle{

display: none;

}

/* Состояние SVG при выборе horizontal */

#pipeline_icon.horizontal #flansch{

display: none;

}

#pipeline_icon.horizontal #horizontal{

display: block;

}

#pipeline_icon.horizontal #tee{

display: none;

}

#pipeline_icon.horizontal #quad{

display: none;

}

#pipeline_icon.horizontal #quarter_circle{

display: none;

}

/* Состояние SVG при выборе tee */

#pipeline_icon.tee #flansch{

display: none;

}

#pipeline_icon.tee #horizontal{

display: none;

}

#pipeline_icon.tee #tee{

display: block;

}

#pipeline_icon.tee #quad{

display: none;

}

#pipeline_icon.tee #quarter_circle{

display: none;

}

/* Состояние SVG при выборе quad */

#pipeline_icon.quad #flansch{

display: none;

}

#pipeline_icon.quad #horizontal{

display: none;

}

#pipeline_icon.quad #tee{

display: none;

}

#pipeline_icon.quad #quad{

display: block;

}

#pipeline_icon.quad #quarter_circle{

display: none;

}

/* Состояние SVG при выборе quarter_circle */

#pipeline_icon.quarter_circle #flansch{

display: none;

}

#pipeline_icon.quarter_circle #horizontal{

display: none;

}

#pipeline_icon.quarter_circle #tee{

display: none;

}

#pipeline_icon.quarter_circle #quad{

display: none;

}

#pipeline_icon.quarter_circle #quarter_circle{

display: block;

}

]]>

</style>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

<defs>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</radialGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</linearGradient>

</defs>

</svg>

SVG готов.

7.Приступим к тестовому импорту, чтобы сформировать XML файл:

Создаем окно. В контекстном меню окна выбираем Импорт SVG:

svg_scenarii_perekluchenie_92

В окне импорта создаем два параметра со следующими значениями:

Имя параметра	Id элемента SVG	Атрибут элемента SVG
select	pipeline_icon	class
color	change_color	fill

svg_scenarii_perekluchenie_93

Нажимаем Применить.

8.Открываем XML код:

9.Далее, настроим параметр select, чтобы после импорта появился выпадающий список со списком селекторов:

a.В первую очередь в параметре select, после Path="class" нужно убрать закрывающий тег слэш "/":

pipeline_icon.xml

b.Далее нужно вместо обычного тега слэш создать полноценный закрывающий тег </ParameterDef>:

pipeline_icon.xml

c.Между открывающим и закрывающим тегом ParameterDef нужно добавить список тегов Value:

Внутри каждого тега Value будет атрибут DisplayName и контент. В атрибут и контент нужно записать название селектора. И так сделать для каждого тега Value.

pipeline_icon.xml