How to animate linearGradient in svg on hover?

Question

css

Hello, please tell me how to animate svg linearGradient
For example, this code is not animated

<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

1. You have inline css written in sass or less syntax.
2. block__submit - no dot before class styles.
3. In principle, the first 2 points do not care, since gradients in svg do not animate like that, especially on hover.
Those. if you change your css to valid -

.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;
}

you will see that the colors change on hover, but you will not achieve any smoothness, since the color value is not numeric, and css animations (including transition) are applicable only to numeric values.
Gradient animations in svg are done a little differently. Applied to hover - as an option

Answer 2

Or use js

or smil https://css-live.ru/articles/rukovodstvo-po-svg-an...