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

Question

我具有以下仪表部件：

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

该组件将prop rating作为数字。

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

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

Answer 1

请签出沙箱网址 Sandbox link

我对CSS做了些改动

(?= |\z)

我希望这是您想要的。