1.Предварительно создадим квадрат с градиентом. Ниже пример из графического редактора Figma.
2.В данном квадрате следующий линейный градиент:
Stop |
Color |
Opacity |
0% |
#929292 |
100% |
50% |
#FFFFFF |
100% |
100% |
#929292 |
100% |
3.Экспортируем 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="url(#paint0_linear_13890_135555)"/> <defs> <linearGradient id="paint0_linear_13890_135555" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse"> <stop stop-color="#929292"/> <stop offset="0.495" stop-color="white"/> <stop offset="1" stop-color="#929292"/> </linearGradient> </defs> </svg> |
4.Как дальше будет происходить настройка динамизации:
В теге <linearGradient> находятся три тега <stop>.
К каждому тегу <stop> нужно добавить уникальный id, чтобы потом в XML создать три отдельных параметра, где каждый параметр будет регулировать нужный stop у градиента.
5.Создадим три уникальных id для каждого <stop>:
•start_color;
•middle_color;
•end_color.
<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="url(#paint0_linear_13890_135555)"/> <defs> <linearGradient id="paint0_linear_13890_135555" x1="50" y1="0" x2="50" y2="100" gradientUnits="userSpaceOnUse"> <stop id="start_color" stop-color="#929292"/> <stop id="middle_color" offset="0.495" stop-color="white"/> <stop id="end_color" offset="1" stop-color="#929292"/> </linearGradient> </defs> </svg> |
6.SVG готов, перейдем к импорту:
Создаем новое окно > ПК мыши по Окну > Импорт SVG:
7.В окне импорта SVG создадим три параметра и присвоим им следующие значения:
Имя параметра |
Id элемента SVG |
Атрибут элемента SVG |
start |
start_color |
stop-color |
middle |
middle_color |
stop-color |
end |
end_color |
stop-color |
Важно! Обратите внимание, что в сценарии динамизации заливки фона использовался атрибут fill. У градиентов данный атрибут отсутствует. Вместо атрибута fill в окне импорта нужно указать stop-color.
После этого нажимаем Применить.
Если всё сделано верно, то в панели свойств появятся три цвета, где каждый будет отвечать за изменение цвета в нужной точке градиента:
8.Создадим новое окно и добавим в него SVG и три кнопки выбора цвета:
9.Свяжем каждую из кнопок выбора цвета со свойством SVG:
•Первая кнопка выбора цвета свойство Значение -> свойство SVG start:
•Вторая кнопка выбора цвета свойство Значение -> свойство SVG middle:
•Третья кнопка выбора цвета свойство Значение -> свойство SVG end:
10.Назначаем Окно как стартовое и запускаем проект на исполнение.
Теперь благодаря кнопкам выбора цвета можно изменять каждую точку градиента у квадрата:
