@pdibbert

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

Здравствуйте, скажыте пожалуйста как анимировать 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>
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 2
@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 - как вариант
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы