主页 / 问题 / 1155758
Accepted
Leks
Asked:2020-07-22 06:01:15 +0000 UTC2020-07-22 06:01:15 +0000 UTC

使用 SVG 或 CSS 为平滑的颜色变化设置动画

  • 772

<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>

css

2 个回答

  1. 速写：

    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>

    • 3
  2. Best Answer

    为了使颜色替换动画起作用，您需要在代码中将其替换
    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>

    要发生完整的颜色变化，您需要为两种颜色的偏移设置动画

    点击后动画会开始

    <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>

    • 3

相关问题