html - 如何使 svg 颜色随时间变化

Question

我在下面有这条 SVG 路径线，它有两个圆圈，以特定的持续时间从一端移动到另一端。是否可以更改蓝色圆圈的颜色，使其在开始时为蓝色，20 秒后，它会开始变白，然后在还有 20 秒到达结束，而红色圆圈会根据圆圈的颜色改变自己的颜色，然后在当前蓝色移动圆圈后面添加发光，这将是当前蓝色圆圈的颜色？

这是否意味着整体必须使用 javascript 制作，或者我必须如何修改 HTML 才能使其按照描述的方式运行？

			<svg width="450" height="450">
               <path id="motionPath2"
					d="M 50 200 L 400 200 "
					stroke="
					none" fill="transparent" />
					         <circle class="circle" r=20 fill=#ff0000 z-index=55>
             <animateMotion dur="100s" repeatCount="indefinite"
					rotate="auto">
                 <mpath href="#motionPath2" />
             </animateMotion>
         </circle>
         <path id="motionPath"
					d="M 50 200 L 400 200 "
					stroke="
					black" fill="transparent" />
					         <circle class="circle" r=5 fill=#45b6fe z-index=55>
             <animateMotion dur="100s" repeatCount="indefinite"
					rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
      </svg>

Answer 1

您可以在可以轻松处理着色的地方引入 CSS 动画。

这里有一个基本的例子来说明这个想法:

@keyframes color {
  from {
    fill: red;
  }
  to {
    fill: green;
  }
}

#big {
  animation: color 20s linear infinite;
}

<svg width="450" height="450">
               <path id="motionPath2"
					d="M 50 200 L 400 200 "
					stroke="
					none" fill="transparent" />
					         <circle class="circle" id="big" r=20 fill=#ff0000 z-index=55>
             <animateMotion dur="20s" repeatCount="indefinite"
					rotate="auto">
                 <mpath href="#motionPath2" />
             </animateMotion>
         </circle>
         <path id="motionPath"
					d="M 50 200 L 400 200 "
					stroke="
					black" fill="transparent" />
					         <circle class="circle" r=5 fill=#45b6fe z-index=55>
             <animateMotion dur="20s" repeatCount="indefinite"
					rotate="auto">
                 <mpath href="#motionPath" />
             </animateMotion>
         </circle>
      </svg>

因为它是关于一个简单的几何体，你可以只使用 CSS 而不使用 SVG 轻松地做到这一点

.box {
 margin:100px;
 height:2px;
 background:green;
 position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  background:red;
  animation:move 10s linear infinite alternate;
  animation-name:move,color,glow;
}
.box:after {
  width:20px;
  height:20px;
  background:blue;
}
@keyframes move {
  to {
    left:100%;
  }
}

@keyframes color {
  to {
    background:yellow;
  }
}
@keyframes glow {
  to {
    box-shadow:0 0 30px yellow;
  }
}

<div class="box">

</div>