如何为 SVG 路径填充不透明度属性设置动画？

Question

我有以下仪表组件：

组件也在此处渲染：https://codesandbox.io/s/react-example-e3nxg

组件将 rating 作为一个数字。

我想学习如何为路径的不透明度值设置动画。例如，如果为 rating 传递了一个值 5... 如何使组件在每个路径中动画，在每个路径之间的设定时间延迟上一次一个。

关于如何做到这一点的任何想法？

Answer 1

请查看沙盒网址 Sandbox link

我对css做了一点改动

  #gauge {
  fill: red;
}

.Animate-Draw {
  fill-opacity: 0;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-name: FillIn;
  animation-duration: 4s 0.5s;
  /* animation-delay: .5s; */
}
.Animate-Draw:nth-child(1) {
  animation-delay: 0.5s;
}
.Animate-Draw:nth-child(2) {
  animation-delay: 1s;
}
.Animate-Draw:nth-child(3) {
  animation-delay: 1.5s;
}
.Animate-Draw:nth-child(4) {
  animation-delay: 2s;
}
.Animate-Draw:nth-child(5) {
  animation-delay: 2.5s;
}
.Animate-Draw:nth-child(6) {
  animation-delay: 3s;
}
.Animate-Draw:nth-child(7) {
  animation-delay: 3.5s;
}
.Animate-Draw:nth-child(8) {
  animation-delay: 4s;
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

我希望这就是你要找的。​​p>