В разделе Поточечная динамизация градиента демонстрируется сценарий, который позволяет регулировать каждую точку градиента. Данный подход может не подойти для сложной фигуры с разным количеством градиентов.
Сценарий из данного раздела предлагает полностью изменить подход к созданию SVG с градиентами. Для этого мы создадим слой непрозрачности, который будет имитировать эффект градиента, но с возможностью регулировки только одного цвета.
Структура слоя SVG:
•Слой непрозрачности, который будет имитировать градиент;
•Цветная подложка, которая будет менять свой цвет.
1.В первую очередь рассмотрим, чем отличается данный сценарий от создания обычного градиента. Ниже пример из графического редактора Figma.
•Создадим SVG 100x100.
•В неё добавим два квадрата 100x100:
Выберем самый верхний SVG "Rectangle 27":
"Rectangle 27" будет выступать в роли непрозрачного слоя для имитации градиента.
•Выставим данному квадрату градиент, где центральный цвет будет белым, а крайние - прозрачными.
Stops |
Color |
Opacity |
0% |
#FFFFFF |
0% |
50% |
#FFFFFF |
100% |
100% |
#FFFFFF |
0% |
•Теперь выберем "Rectangle 26" и выставим ему цвет подложки #929292, который использовался в сценарии Поточечная динамизация градиента.
Это нужно для визуального сравнения: данный подход действительно имитирует обычный линейный градиент.
Слева квадрат с линейным градиентом из сценария Поточечная динамизация градиента, справа SVG, которая имитирует градиент с помощью специального слоя:
•SVG готов - экспортируем.
2.Посмотрим код 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="#929292"/> <rect width="100" height="100" fill="url(#paint0_linear_13893_135558)"/> <defs> <linearGradient id="paint0_linear_13893_135558" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse"> <stop stop-color="white" stop-opacity="0"/> <stop offset="0.5" stop-color="white"/> <stop offset="1" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> </svg> |
3.Необходимо динамизировать атрибут fill в теге <rect width="100" height="100" fill="#929292"/>.
Для этого в тег rect с fill #929292 добавим новый атрибут 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="#929292"/> <rect width="100" height="100" fill="url(#paint0_linear_13893_135558)"/> <defs> <linearGradient id="paint0_linear_13893_135558" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse"> <stop stop-color="white" stop-opacity="0"/> <stop offset="0.5" stop-color="white"/> <stop offset="1" stop-color="white" stop-opacity="0"/> </linearGradient> </defs> </svg> |
4.SVG готов - переходим к импорту:
Создаем новое окно > ПК мыши по Окну > Импорт SVG:
5.В окне импорта SVG создадим параметр и присвоим ему следующие значения:
Имя параметра |
Id элемента SVG |
Атрибут элемента SVG |
color |
rect_color |
fill |
После этого нажимаем Применить.
Важно! Если импорт прошел неудачно, то нужно самостоятельно создать XML с названием как у SVG, в примере выше название XML будет "rect_imitation_gradient.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.Назначаем Окно как стартовое и запускаем проект на исполнение.
Благодаря кнопке выбора цвета можно изменять заливку у квадрата, будто изменился цвет градиента:
Примечаение: В данном сценарии нельзя менять цвет только у верхнего слоя непрозрачности, который имитирует градиент.
Так или иначе, этот сценарий сокращает количество параметров для регулирования цвета в сравнении со сценарием Поточечная динамизация градиента.