svg 圆圈颜色在某个点发生变化 [英] svg circle color change at certain point

问题描述

我有一个圆形正在通过路径移动的 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 圆圈颜色在某个点发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！