SVG circle appears briefly at (0,0) before animating to correct position — how to fix?

The issue you’re experiencing is a classic “Flash of Unstyled Content” (FOUC), but one specific to SVG attributes within an Angular application.

Upon a hard reload, the browser and Angular’s rendering engine enter a sort of “race”. The browser attempts to render the DOM as quickly as possible. When Angular, via the @if directive, inserts the SVG block into the DOM, the browser may, for a single frame, render the element before Angular has had time to apply the values of the cx and cy attributes via data binding.

As a result, the circle is drawn at the default coordinates for an SVG element, which are (0,0), and then instantly moves to the correct position (316, 59.5) as soon as Angular’s rendering completes, causing the flash you see.

The solutions you’ve tried (such as opacity or visibility) don’t work because they hide the element entirely. The problem isn’t that the element is visible too early, but that one of its children ( ) is drawn with incorrect attributes for a fraction of a second.

The most robust solution in this context is to ‘freeze’ the rendering of the SVG animation until you are absolutely certain that Angular has completed its rendering and layout cycle. We can achieve this by setting the animation’s begin attribute to "indefinite" and starting it programmatically via JavaScript/TypeScript only after the view has been initialised.

Add an ID to the element so that you can select it from the TypeScript code, and set begin="indefinite".

Use AfterViewInit to ensure that the template has been rendered in the DOM. At that point, access the animation element and start the animation manually.

@ViewChild('blinker') blinkerAnimation: ElementRef;
  ngAfterViewInit(): void {
    // In this lifecycle hook, Angular ensures that the view has been initialised and that the cx/cy attributes are already set correctly.
    // We can now safely start the animation.
    this.blinkerAnimation.nativeElement.beginElement();
  }

This way, the animation of the circle’s radius will only start once the circle itself has been drawn in its final position, eliminating the initial flash.