Анимация градиента SVG под углом

226

11 апреля 2019, 16:20

Как правильно реализовать анимацию градиента 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>

Answer 1

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

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>