动画 SVG 虚线逐渐变成不同的颜色

Question

我有这个 SVG

<svg width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="white" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#222222" stroke-opacity="0.3" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
</svg>

我的目标是根据某些应用程序状态为每个方块设置蓝色动画，想法是它是一个加载器，一旦数据进入它就会全部变成蓝色。所以最终结果将如下所示

<svg width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20 10 20 10 20"/>
</svg>

感谢任何提示以及如何进行此操作

Answer 1

使用 SVG 遮罩动画。

底层为蓝色曲线
顶层-灰色曲线

当蒙版从左到右设置动画时，上面的灰色曲线被切掉，下面的蓝色曲线因此变得可见。

 <animate attributename="x" begin="svg1.click" dur="4s" values="-452;0" repeatCount="indefinite" />

创建了一种用蓝色填充曲线灰色的错觉。

点击后动画开始

<svg id="svg1" width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
  <mask id="msk">
     <rect width="100%" height="100%" fill="white" />
    <rect fill="black" x="-452" y="0" width="450" height="100" >
      <animate id="an" attributeName="x" begin="svg1.click;an.end+0.5s" dur="7s" values="-452;10" repeatCount="1" fill="freeze" />
    </rect>
  </mask>
</defs>

<path id="path" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/> 

<path  mask="url(#msk)" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#BCBCBC" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/> 
</svg>

更新

@Dmitriy 评论

For Example- the data comes in in 4 seconds instead of 7 seconds - could i instantly finish the animation once that happens?

为此，您可以使用 repeatDur 此属性会在动画开始播放一定时间后停止播放动画！简单地说，repeatDur 限制了动画的持续时间。

<svg id="svg1" width="455" height="102" viewBox="0 0 455 102" fill="none" xmlns="http://www.w3.org/2000/svg" style="border:1px solid">
<defs>
  <mask id="msk">
     <rect width="100%" height="100%" fill="white" />
    <rect fill="black" x="-452" y="0" width="450" height="100" >
      <animate id="an" attributeName="x" begin="svg1.click" dur="7s" repeatDur="4s" values="-452;10" repeatCount="1" fill="freeze" />
    </rect>
  </mask>
</defs>

<path id="path" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#007CFF" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/> 

<path  mask="url(#msk)" d="M451.556 25.1576C435.152 73.3258 366.885 125.586 296.309 84.449C257.221 59.9286 203.507 18.9945 182.449 13.1117C114.633 -12.4168 41.0939 12.8604 2.57437 66.1813" stroke="#BCBCBC" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="10 20"/> 
</svg>

动画 SVG 虚线逐渐变成不同的颜色

Animate SVG dotted line a different color progressively

animation

svg

更新