Safari中<use>引用的SVG元素无法应用CSS动画的问题求助

各位大佬，我最近碰到个头疼的SVG动画问题：用<use>标签引用的SVG元素，在Firefox和Chrome里都能正常播放CSS动画，但到了Safari里就完全没反应。我做了个最简Demo来复现这个问题，麻烦大家帮我看看怎么解决？

下面是Demo代码：

<svg
  viewBox="0 0 200 100"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMidYMid slice"
  style="width: 100%"
>
  <defs>
    <circle id="t" class="test" cx="50" cy="50" r="25" fill="hotpink"/>
  </defs>

  <!-- 这个圆形没有动画效果 -->
  <use href="#t"></use>

  <!-- 这个圆形动画正常 -->
  <circle class="test" cx="110" cy="50" r="25" fill="hotpink"/>

  <style>
    .test {
      animation: 3s test infinite;
      /* 这里能证明样式是生效的：两个圆都变成了 limegreen 而不是原来的 hotpink */
      fill: limegreen;
    }
    @keyframes test {
      0% { transform: scale(1); }
      50% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }
  </style>
</svg>

情况说明：

• 左边用<use>引用的圆形，在Safari里完全没有缩放动画
• 右边直接定义的圆形，在所有浏览器里动画都正常
• 两个圆的颜色都变成了limegreen，说明CSS的基础样式能正常作用到<use>引用的元素上，唯独动画不起作用

有没有大佬知道Safari这里的兼容性问题该怎么解决呀？

备注：内容来源于stack exchange，提问作者Znert