TransWikia.com

Анимировать плавное изменение цвета с помощью SVG или CSS

Stack Overflow на русском Asked on November 15, 2021

<svg viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
 
<defs>
<linearGradient id="MyGradient">
      <stop offset="0" style="stop-color:red;"/>
     <stop offset="100%" style="stop-color:blue;">
      <animate attributeName="offset" 
         from="0%" to="100%" dur="5s"
               repeatCount="indefinite"/>
      </stop>

</linearGradient>

  </defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>
</svg>
csscss animationsvgsvg animation

2 Answers

Чтобы анимация замены цвета заработала нужно заменить в коде
from="0%" to="100%" на from="0" to="1"

<svg viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
 
<defs>
<linearGradient id="MyGradient">
      <stop offset="0" style="stop-color:red;"/>
    
    <stop offset="100%" style="stop-color:blue;">
      <animate attributeName="offset" 
         from="0" to="1" dur="5s"
               repeatCount="1" fill="freeze"/>
      </stop>
</linearGradient>
  </defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>
</svg>

Чтобы произошла полная смена цвета нужно анимировать offset у обоих цветов

Анимация начнется после клика

<svg id="svg1" viewBox="0 0 520 520" width="500" style='border: 1px solid black'>
 <defs>
<linearGradient id="MyGradient">
      <stop offset="0" style="stop-color:red;"> 
        <animate attributeName="offset" 
         from="0" to="1" begin="svg1.click" dur="5s"
               repeatCount="1" fill="freeze"/>
    </stop>
        <stop offset="0" style="stop-color:blue;">
          <animate attributeName="offset" 
             from="0" to="1" begin="svg1.click" dur="5s"
                   repeatCount="1" fill="freeze"/>
        </stop>
</linearGradient>
  </defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>
</svg>

Другие варианты анимации при наведении курсора

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

.crc1:hover ~ defs stop:first-child {
  stop-color: #24bed2;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: #32ffe4;
}
<svg class="the-svg" width="200px" viewBox="0 0 100 100">
  <circle class="crc1" cx="50" cy="50" r="50"/>
  <defs>
    <linearGradient id="grad1"
      x1="0"
      x2="0"
      y1="62"
      y2="0"
      gradientUnits="userSpaceOnUse">
       <stop offset="40%" stop-color="red"/>
       <stop offset="100%" stop-color="red"/>
    </linearGradient>
  </defs>
</svg>

В начальном и конечном состоянии анимации у градиента два цвета меняются на два других цвета.

.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="0" x2="0" y1="90" y2="0" gradientUnits="userSpaceOnUse">
      <stop offset="2%" stop-color="#2C2C2C"/>
      <stop offset="50%" stop-color="#2C2C2C"/>
    </linearGradient>
  </defs>
</svg>

Анимация градиента для текста

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

.crc1 ~ defs stop:first-child {
  stop-color: dodgerblue;
}
.crc1:hover ~ defs stop:last-child {
  stop-color: gold;
}
<svg class="the-svg" width="400px" height="400px" viewBox="0 0 250 250">
   <!-- <circle class="crc11" cx="50" cy="50" r="50"/> -->
   <rect width="100%" height="50%" fill="#212121" />
  <text class="crc1" font-size="120" font-family="serif" font-weight="600" x="0" y="100" >Leks </text>
  <defs>
    <linearGradient id="grad1"
      x1="0"
      x2="0"
      y1="200"
      y2="0"
      gradientUnits="userSpaceOnUse">
      <stop offset="35%" stop-color="#FF1B1B"/>
      <stop offset="80%" stop-color="#FF1B1B"/>
    </linearGradient>
  </defs>
</svg>

Answered by Alexandr_TT on November 15, 2021

Быстрый набросок:

svg {
  width: 200px;
  border: 1px solid;
}
<svg viewBox="0 0 520 520" width="500" style="border: 1px solid black">
    <defs>
        <linearGradient id="MyGradient" x1="0" y1="0" x2="100%" y2="0">
            <stop offset="0" stop-color="blue">
               <animate attributeName="stop-color" values="green;blue" dur="10s" repeatCount="1" fill="freeze" /> 
            </stop>
            <stop offset="1" stop-color="blue">
                <animate attributeName="stop-color" values="blue;green" dur="10s" repeatCount="1" fill="freeze" /> 
            </stop>
        </linearGradient>
    </defs>
<circle cx="255" cy="255" r="200" fill="url(#MyGradient)" />
</svg>

Answered by Vasily on November 15, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP