Как изменить цвет svg заливки?

Question

[Breeze1]

Добрый вечер.
Подскажите, по ховеру нужно менять цвет заливки svg, в примере работает как нужно, проблема в том, что сердец таких будет много, и если менять фон привязываясь к id валидатор будет ругаться.

Есть еще какой-то способ менять цвет на градиентную заливку, но не привязываюсь к id svg ?

Пример codepen

Comments

[Ankhena]

1. Почитайте про <use>, в том числе и прямо в svg. Нет смысла дублировать один и тот же градиент 1000 раз. Да и сами сердечки тоже.

2. Почитайте про css свойство mask. А в качестве bg задавайте градиент.

Answer 1

[Максим]

конечно порнуха, но я завтра буду дома и сделаю по нормальному

в общем, градиент не возможно сделать с анимацией, но я попробую сделать это но будет с избыточным кодом, такую шляпу лучше вставлять в html скриптом

Answer 2

[Ivan Ustûžanin]

заливка одинаковая у всех сердец? если да, то описание градиента выносится в отдельный блок или оставляется только в первом svg, а остальные его спокойно используют

Comments

[Breeze1]

спасибо, попробую