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

Question

我有以下仪表组件：

该组件也在此处呈现： https : //codesandbox.io/s/react-example-e3nxg

该组件将道具rating作为数字。

我想学习如何做的是为路径的不透明度值设置动画。 例如，如果为评级道具传递的值是5 ...如何使其如此，则组件将在每条路径中进行动画处理，一次在每条路径之间的设定时间上进行一次动画处理。

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

Answer 1

请检出沙盒网址沙盒链接

我对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;
  }
}

我希望这是您要寻找的。