SVG加载动画圆圈硬刷新时先显示在(0,0)的修复方案咨询

我用SVG实现了一个加载动画用的闪烁圆圈，通过cx和cy属性固定了它的坐标：

<circle cx="316" cy="59.5" r="7" fill="url(#dg2)" filter="url(#glow)">
  <animate
    attributeName="r"
    dur="1.5s"
    repeatCount="indefinite"
    values="7;11;7"
    keyTimes="0;0.5;1"
    calcMode="spline"
    keySplines="0.4 0 0.6 1; 0.4 0 0.6 1"
  />
</circle>

在浏览器硬刷新时（已在Chrome和Firefox测试，与浏览器无关），这个圆圈会短暂出现在错误位置——页面左上角，之后才会回到正确的坐标位置。

我试过以下几种方法，但都没能解决问题：

• 初始设置opacity="0"，通过动画将其显示
• 给容器设置visibility: hidden，在Angular的AfterViewInit钩子后切换可见性
• 将SVG包裹在容器中，通过requestAnimationFrame或setTimeout延迟渲染
• 给SVG元素设置overflow: hidden
• 将圆圈放在带有CSS visibility动画的<g>标签内

这个组件通过Angular v20的@if指令进行条件渲染，问题仅在硬刷新时出现，后续页面导航不会触发该问题。

内容的提问来源于stack exchange，提问作者Mumpitz