reactjs - 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，但返回正确的值当组件卸载时。