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

这是对您问题的部分回答，因为我仅部分理解。我希望看到答案后，您可以提出一个更好的问题。

我所做的更改：

您正在为每个圆使用动画，但是由于路径相同且动画相同，因此我将两个圆都放在了一个组中，并为圆设置了动画。

此外，由于路径是一行，因此我本可以使用animateTransform ... type="translate"。但是，您可能希望将路径更改为更复杂的内容，因此我坚持使用animateMotion。

要设置颜色的动画，可以使用<animate>设置填充的动画，并使用values属性设置颜色：values="red;white;orange"

由于您提到动画结束前20秒会出现最后一种颜色，因此我使用的是keyTimes= "0; 0.8; 1"。请注意，keyTimes属性与values属性具有相同数量的值，并且代表用于控制动画节奏的时间值列表。

<svg width="450" height="450">
<path id="motionPath2" d="M 50 200 L 400 200 "
					stroke="black" fill="transparent" />
<g>  
  <circle class="circle" r="20" fill="#ff0000"></circle>
<circle class="circle" r=5 fill="#45b6fe" >
     <animate 
       attributeName="fill"
       attributeType="XML"
       values="#45b6fe;white;orange"
       keyTimes= "0; 0.8; 1"
       dur="100s"
       repeatCount="indefinite"/>
  </circle>
   <animateMotion dur="100s" repeatCount="indefinite">
       <mpath href="#motionPath2" />
   </animateMotion>
  </g>       
 </svg>

Answer 2

您可以引入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>

如何使svg颜色随时间变化

2 个答案: