Как анимировать linearGradient в svg при hover?

Question

[pdibbert]

Здравствуйте, скажыте пожалуйста как анимировать svg linearGradient
К прмиеру етот код не анимируется

<svg class="block__submit">
        <linearGradient id="linear-gradient1">
          <stop offset="0%" stop-color="silver" class="stop-start" />
          <stop offset="100%" stop-color="gold" class="stop-end" />
        </linearGradient>
        <rect fill="url(#linear-gradient1)" width="100%" height="100%" />
      </svg>
<style>
block__submit {
      transition: all 5s ease;
      height: 4vmin;
      width: 100%;
}
      block__submit:hover {
        .stop-start {
          stop-color: green !important;
        }
        .stop-end {
          stop-color: red !important;
        }
      }
    }
</style>

Answer 1

[lagudal]

1. У вас инлайн css записан в синтаксисе sass или less.
2. block__submit - нет точки перед стилями класса.
3. В принципе, первые 2 пункта - пофигу, так как градиенты в svg так не анимируются, тем более по hover.
Т.е. , если вы поменяете ваш css на валидный -

.block__submit {
  transition: hover 5s ease;
  height: 4vmin;
  width: 100%;
}
.block__submit:hover .stop-start {
  stop-color: green !important;
}
.block__submit:hover .stop-end {
  stop-color: red !important;
}

вы увидите, что цвета по наведению меняются, но никакой плавности вы не добьетесь, так как значение цвета - не числовое, а css анимации (в т.ч. transition) применимы только к числовым значениям.
Анимации градиентов в svg делаются немного по другому. Применительно к hover - как вариант

Answer 2

[RAX7]

Либо использовать js

либо smil https://css-live.ru/articles/rukovodstvo-po-svg-an...