如何為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;
  }
}

我希望這是您要尋找的。