Как задать stroke-dasharray/offset — для сложных svg-элементов?

Question

[Danila232]

Хочу сделать анимацию - есть кнопка, по бокам от неё стрелки, которые изначально скрыты. При наведении на кнопку, стрелки красиво отрисовываются через stroke-dash-array/offset(юзаю Gsap)
Но почему-то эти свойства НИКАК не влияют на мои стрелки, совсем

Я почитал про это, и как я понял, если структура svg-элемента сложная, то такие свойства для него не будут работать. А для простых circle/line/polyline и тд - работать будет

Можно это как то обойти и задать эти свойства для более сложных элементов?
Ссылка на анимацию со стрелками: https://codepen.io/Vegan-AK/pen/MWdgabP
*пока сделал анимашку через scale, но выглядит так себе, через svg-свойства красивее

Comments

[IvanU7n]

ну так заливка это не окантовка, чтобы получить похожий эффект (если я правильно наванговал) нужно играться с анимацией градиента заливки

[Danila232]

IvanU7n, хм, а как с ней играться? через какие свойства

[IvanU7n]

Danila232, да через любые доступные: https://developer.mozilla.org/en-US/docs/Web/SVG/E...
первое что приходит в голову это gradientTransform