svg 圆圈颜色在某个点发生变化

问题描述：

我有一个圆形正在通过路径移动的 svg.我希望圆圈的颜色在某些点(例如路径的中间)发生变化

I have a svg that circle is moving around through path. I want the circles' color are changed at some points (ex. mid of the path)

https://codepen.io/lzwdct/pen/poRYVXZ

<circle r="20" fill="blue" mask="url(#myMask)">
    <animateMotion dur="5s" repeatCount="indefinite"
      path="M718.54,66.06L294.41,490.19c-48.89,48.89-128.09,48.95-176.91,0.13c-48.82-48.82-48.76-128.02,0.13-176.91
            s128.09-48.95,176.91-0.13 M294.28,313.55l424.13,424.13c48.89,48.89,128.09,48.95,176.91,0.13c48.82-48.82,48.76-128.02-0.13-176.91
            c-48.89-48.89-128.09-48.95-176.91-0.13" />
</circle>

请指导我如何更新颜色.颜色最终会随着路径长而多次改变.

Please guide me how to update the color. The color eventually will be changed multiple times with long paths.

答

你需要为你的路径调整它，基本概念是在你想要改变的元素上添加一个 animate 并使用 values 和 keyTimes(整个动画是 0 到 1)

You need to tweak it for your paths, basic concept is to add an animate on the element you want to change and use values and keyTimes (the whole animation is 0 to 1)

您会注意到，您可以免费获得颜色渐变.
如果您不希望那样，请添加更多 keyTimes 以便更快地发生颜色褪色

As you will notice, you get a color-gradient for free.
If you don't want that, add more keyTimes so the color fades occur faster

<svg width="450" height="180">
<path id="PATH" d="M 50 90 H400" stroke="black"/>
  <g>  
    <circle class="circle" r="30" fill="black"></circle>
    <circle class="circle" r=25 fill="red" >
      <animate 
         attributeName="fill"
         attributeType="XML"
         values="red;green;yellow;hotpink;blue"
         keyTimes= "0;0.4;0.6;0.8;1"
         dur="3s"
         repeatCount="indefinite"/>
    </circle>
    <animateMotion dur="3s" repeatCount="indefinite">
      <mpath href="#PATH" />
    </animateMotion>
  </g>       
</svg>

svg 圆圈颜色在某个点发生变化

相关推荐