SVG无法在Safari中使用样式化组件制作动画

Question

我在React中有一个样式化的组件，该组件在Chrome和Firefox中动画效果很好，但没有Safari（最新版）。

const morph = keyframes`
  to {stroke-dasharray: 0,100}
`;

const Circle = styled.circle`
  animation: ${morph} 2s reverse;
`;

最后一个Circle组件是甜甜圈图的一部分，该甜甜圈图在渲染时绘制出圆形图：

<Svg width="40%" height="40%" viewBox="0 0 42 42">
    <circle cx="21" cy="21" r="15.91549430918954" fill="#FFF"></circle>
    <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#D2D3D4" strokeWidth="3"></circle>
    <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#AAAAAA" strokeWidth="3" strokeDasharray={props.segments} strokeDashoffset="25"></circle>
    <Circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#F1A456" strokeWidth="3" strokeDasharray={props.donut} strokeDashoffset="25.5"></Circle>
    <G>
       <Text x="50%" y="40%" ChartTextSlot>
          openings:
       </Text>
       <Text x="50%" y="65%" ChartTextSlotNumber>
          {props.remain}
       </Text>
    </G>
 </Svg>

我认为Safari不喜欢速记语法，所以我尝试了：

const Circle = styled.circle`
  animation-duration: ${morph} 2s;
  animation-direction: ${morph} reverse;
`;

有什么想法吗？