react-spring svg dashoffset在safari中没有动画

Question

我的react-spring svg动画在Safari中不起作用

我正在使用react挂钩和react-spring动画库，我的代码在Chrome和Firefox中有效，但在Safari中不起作用。

 const [timerCircumference, setTimerCircumference] = useState(0);
  // computes the percentage of time left
  const animator = useSpring({
    to: { pathLength: timerCircumference },
    config: { duration: 5000 },
    from: { pathLength: 0 }
  });

  const measuredRef = useCallback(
    node => {
      if (node !== null) {
        setTimerCircumference(node.getTotalLength());
        console.dir(node);
        console.log(`node length: ${node.getTotalLength()}`);
      }
    },
    []
  );
  return (
    <svg
      viewBox={`0 0 512 512`}
      role="img"
      className="svg-inline--fa fa-circle fa-w-16 white"
      focusable="false"
      aria-hidden="true"
      data-icon="circle"
      data-prefix="fal"
    >
      <g transform="translate(256 256)">
        <animated.circle
          r={`${232}`}
          fill="none"
          strokeWidth="18"
          stroke="currentColor"
          ref={measuredRef}
          strokeDashoffset={animator.pathLength}
          strokeDasharray={timerCircumference}
        />
      </g>
    </svg>
  );

strokeDashoffset值应该设置动画，但不设置动画 useCallback块中的控制台日志显示，使用getTotalLength（）测量DOM节点时，与Chrome和Firefox不同，Safari中的值最初为0，但在卸载组件时返回正确的值。