1.Воспользуемся готовой SVG обычного квадрата с заливкой #006398 (rect.svg):
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="#006398"/>
</svg>
2.Для сценария нужно обратить внимание на тег rect и его атрибут fill, который отвечает за заливку фона.
3.Добавим в rect новый атрибут id со значением rect_color, чтобы XML смог к нему обратиться. Записывается это следующим образом: id="rect_color":
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect id="rect_color" width="100" height="100" fill="#006398"/>
</svg>
4.SVG готов, теперь приступим к импорту:
Создаем новое окно > ПК мыши по Окну > Импорт SVG:
5.В окне импорта SVG создадим Параметр и присвоим ему следующие значения:
Имя параметра |
Id элемента SVG |
Атрибут элемента SVG |
color |
rect_color |
fill |
Нажимаем Применить.
Важно! Если импорт прошел неудачно, то нужно самостоятельно создать XML с названием как у SVG, в примере выше название XML будет "rect.xml". Далее, нужно проверить, какой тип параметра установился по умолчанию. Для динамизации цвета нужно использовать тип: Type="HMI.SolidColorType", иначе цвет динамизировать не получится. Ниже приведён рабочий XML:
<?xml version="1.0" encoding="utf-8"?>
<SvgDef xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" CreateCommonAvary="false">
<ParameterDefs>
<ParameterDef DisplayName="color" Type="HMI.SolidColorType" ParamType="Attribute" ItemId="rect_color" Path="fill" />
</ParameterDefs>
</SvgDef>
Если всё сделано верно, то в панели свойств появится специальное свойство, благодаря которому можно видоизменять иконку:
6.Создадим новое окно. В него добавим кнопку выбора цвета и SVG:
7.Выбираем кнопку выбора цвета и связываем с помощью зажатия ПК мыши свойство Значение кнопки выбора цвета со свойством color SVG:
8.Назначаем Окно как стартовое и запускаем проект на исполнение.
Теперь благодаря кнопке выбора цвета можно изменять заливку у квадрата:
