4

Как правильно реализовать анимацию градиента SVG элемента под углом и с задержкой?

svg {
  transform: rotate(250deg);
}
<svg>
    <circle r="27" cx="28" cy="28" fill="url(#lightGradient)"/>
    <linearGradient id="lightGradient">
      <stop offset="0%" stop-color="rgba(0,99,71, 1)">
        <animate attributeName="stop-color" values="rgba(0,99,71, 0.62); rgba(0,99,71, 0.12)" dur="4s" repeatCount="indefinite"/>
      </stop>
      <stop offset="100%" stop-color="rgba(228,210,9, 1)">
        <animate attributeName="stop-color" values="rgba(228,210,9, 0.62); rgba(228,210,9, 0.22)" dur="4s" repeatCount="indefinite" />
      </stop>
    </linearGradient>
</svg>

3
  • 1
    заглядывай в топик, постараюсь сегодня успеть 10 ноя 2018 в 15:47
  • может лучше не прозрачность менять, а цвет градиента? 10 ноя 2018 в 15:54
  • Можно и цвет, я думаю потом по аналогии. 10 ноя 2018 в 16:02

1 ответ 1

4
  • Угол наклона градиента обеспечивают параметры:

    x1="45" x2="0" y1="75" y2="0"

  • Анимация перехода градиента из одного цвета в другой:

.crc1 ~ defs stop { transition: 3s;

Подбирая значения цвета начального градиента -stop:first-child

и конечного - stop:last-child можно получить очень интересные эффекты:

Анимация начинается при наведении курсора:

.crc1 {
  fill: url('#grad1');
}
 .crc1 ~ defs stop {
  transition: 3s;
}

.crc1 ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #F4FFAF;
} 
<svg class="the-svg" width="200px" height="200" viewBox="-10 -10 120 120">
  <circle class="crc1" cx="50" cy="50" r="50"  stroke="#F4FFAF"/>
  <defs>
    <linearGradient id="grad1" x1="45" x2="0" y1="75" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="2%" stop-color="#2C2C2C"/>
      <stop offset="50%" stop-color="#2C2C2C"/>
    </linearGradient>
  </defs>
</svg>

5
  • Возможно глупый вопрос, как Вы подбираете параметры?Почему именно 45 и 75? 10 ноя 2018 в 16:32
  • 1
    @Александр эти углы связаны с другими параметрами градиента - stop offset="50%" границей перекрытия двух цветов. На словах это сложно объяснить, просто поиграйте с этими параметрами 10 ноя 2018 в 16:39
  • @ Alexandr_TT Могу еще отдельный вопрос оформить=)) 10 ноя 2018 в 16:42
  • @Александр я не против, есть очень интересные варианты 10 ноя 2018 в 16:48
  • @ Alexandr_TT ru.stackoverflow.com/questions/904824/… 10 ноя 2018 в 17:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.