@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>
Решения вопроса 0
Ответы на вопрос 2
@lagudal
1. У вас инлайн css записан в синтаксисе sass или less.
2. block__submit — нет точки перед стилями класса.
3. В принципе, первые 2 пункта — пофигу, так как градиенты в svg так не анимируются, тем более по hover.
Т.е. , если вы поменяете ваш css на валидный —
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 — как вариант
@RAX7