Создание окон для клиента визуализации > Рекомендации по созданию окон > Динамизация SVG элементов > Структура XML файла > Теги XML > XML "<SvgDef>" > Альтернативы CreateCommonAvary

Воспользуемся CSS для детальной кастомизации аварийного состояния рамки SVG.

1.В первую очередь в SVG нужно добавить рамку и анимацию. Открываем в блокноте или редакторе кода SVG add_circle_css_alarm.svg:

2.Добавим рамку с помощью тега rect, который будет соответствовать ширине и высоте SVG.

Также внутри тега rect добавим id="alarm_border", чтобы потом регулировать данную рамку с помощью селекторов:

Пока рамка не отображается, ее можно будет увидеть во время отладки.

Почему rect параметры не соответствуют viewBox SVG?

В SVG обводка (рамка, stroke) рисуется по центру линии. Если rect будет с параметрами x="0" y="0" width="24" height="24", то половина обводки окажется за краем SVG и не будет видна.

Чтобы рамка была видна полностью по всем сторонам SVG, rect немного сдвигают внутрь (x="0.5" y="0.5") и делают меньше (width="23" height="23").

3.Далее, между тегами svg и path нужно создать новый тег style с экранированием CDATA:

4.Создаем пустые 3 селектора, которые будут отвечать за состояние рамки: отключенное состояние рамки (Off), предупредительная рамка (Warning) и аварийная рамка (Danger):

Подобная запись #alarm_border.Off означает следующее:

a.Нужно найти id alarm_border;

b.С селектором Off;

c.Если удастся найти нужный id и селектор, то к элементу будут применены соответствующие стили из CSS;

d.Данный пример подразумевает регулирование подходящего селектора: Off, Warning, Danger с помощью выпадающего списка в MasterSCADA 4D.

5.Добавим стили для каждого селектора:

Off - мы отключим любую анимацию и обводку.

Warning - активируем анимацию и сделаем обводку оранжевого цвета (orange).

Danger - тоже активируем анимацию, но сделаем обводку красного цвета (red).

Примечание: В SVG у элементов, таких как <rect>, <circle>, <path> и т.д., нет свойства border в том смысле, в котором оно есть в HTML. Вместо этого, для создания контура (рамки) используется атрибут stroke, а для толщины контура - stroke-width.

Что означает animation: 1000ms linear 0s infinite normal none running flash?

i.1000ms (animation-duration) - продолжительность анимации. 1000ms означает 1000 миллисекунд, или 1 секунду. Это время, за которое один цикл анимации должен завершиться;

ii.linear (animation-timing-function) - функция анимации. linear обеспечивает равномерное движение без ускорения или замедления. Другие возможные значения: ease, ease-in, ease-out, ease-in-out и т.д.;

iii.0s (animation-delay) - задержка перед началом анимации. 0s означает, что анимация начнется немедленно после применения стилей к элементу. Можно указать положительное значение, чтобы анимация началась через определенное время;

iv.infinite (animation-iteration-count) - количество повторений анимации. infinite означает, что анимация будет повторяться бесконечно, пока стили, содержащие эту анимацию, применяются к элементу. Можно указать числовое значение, чтобы анимация повторилась заданное количество раз;

v.normal (animation-direction) - направление воспроизведения анимации. normal означает, что анимация будет воспроизводиться в прямом порядке (от начала к концу) каждый раз при повторении. Другие возможные значения: reverse, alternate, alternate-reverse;

vi.none (animation-fill-mode) - режим заполнения анимации. none означает, что стили элемента вернутся к исходным значениям после окончания анимации. Другие возможные значения: forwards, backwards, both;

vii.running (animation-play-state) - состояние воспроизведения анимации. running указывает, что анимация должна быть активна. Другое возможное значение: paused;

viii.flash (animation-name): Это имя анимации. flash - это название @keyframes правила, которое определяет последовательность кадров анимации. @keyframes задает, как именно должна выглядеть анимация flash в течение 1 секунды. Именно это имя связывает запись animation: ... flash; с конкретной анимацией.

6.Теперь добавим правило @keyframes, которое полностью повторяет свойство Мигание из MasterSCADA:

7.Проведем небольшую отладку SVG:

В rect добавим новый атрибут class и в него запишем значение Warning (class="Warning"), потом Danger (class="Danger"), чтобы убедиться в работоспособности. И оставим class по умолчанию со значением Off (class="Off"), это будет означать состояние по умолчанию для SVG:

SVG готов, теперь нужно настроить выпадающий список в XML, который будет подставлять нужный селектор: Off, Warning, Danger.

8.Создадим базовый XML. Для этого выполним импорт add_circle_css_alarm.svg в MasterSCADA 4D:

ПК мыши по Окну > Импорт SVG:

SVG_scenarii_cvet_dinam_1

Добавим новый параметр нажатием на кнопку Добавить параметр:

xml_css_1

Заполним его следующим образом:

Имя параметра	Id элемента SVG	Атрибут элемента SVG
state	alarm_border	class

alarm_border - это название того самого id внутри SVG, который был добавлен в пункте 2.

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

xml_css_2

9.Теперь откроем XML: add_circle_css_alarm.xml.

Сейчас в нем используется только один параметр state. Данный параметр нужно расширить до выпадающего списка:

10.После Path="class" уберем лишний слэш "/", чтобы создать полноценный закрывающий тег </ParameterDef>.

Внутри ParameterDef создадим 3 тега Value, каждый из которых обозначает элемент выпадающего списка:

XML готов.

11.Теперь нужно сделать повторный импорт SVG, чтобы обновить свойство state в MasterSCADA.

В окне импорта необходимо нажать Применить, после чего state превратится в выпадающий список:

xml_css_3

Внутри него будут три элемента списка: Off, Warning, Danger:

xml_css_4

12.Создадим окно и разместим в него выпадающий список и две SVG.

У первой (слева) будет активирована галочка Формировать признак аварии, справа будет SVG, который настроен с помощью CSS:

xml_css_5

13.Для выпадающего списка выставим следующие свойства:

•Свойство Список: По умолчанию~Предупреждение~Авария;

•Свойство Выбор: По умолчанию.

Настроим динамизацию выпадающего списка, чтобы он отправлял верные данные в переменную alarm_status:

Источник	Приемник
По умолчанию	0
Предупреждение	1
Авария	2

xml_css_6

14.Теперь настроим динамизацию SVG от параметра alarm_status в дереве проекта в свойство state:

Источник	Приемник
0	Off
1	Warning
2	Danger

xml_css_7

Закрываем окно конвертации.

15.Назначаем Окно 5 как стартовое и запускаем проект на исполнение.

SVG готов:

xml_css_7_a xml_css_7_b xml_css_7_c

Ссылка на проект, иконки и видео: https://disk.yandex.ru/d/axKlH4-6E8YoRg

CSS для кастомизации состояния рамки SVG

CSS для кастомизации состояния рамки SVG