unable to apply different CSS classes to 2 svg images( both are clones of each other)

Question

I have 2 svg images in my html in 2 different divs. On performing some action I am trying to hide one and display another by adding different css classes dynamically from my .ts.

But looks that even though my CSS class(display:block) gets applied to the 2nd svg but since the 1st svg is display:none both the svgs are alway hidden.

I think the CSS of the 1st svg's occurrence prevails over any other change made.

Can some one suggest what can be done to resolve this?

Note: I have used Figma tool to get these svgs.

<div class="divMapGraphic">
   <div *ngIf="!btnCreateGrphcShow" class="ellipseEmptyStep">
        
   <svg width="13" [ngClass]="pointAClicked" height="14" viewBox="0 0 13 14" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <circle cx="6.5" cy="7" r="5.5" transform="rotate(-90 6.5 7)"             fill="url(#paint0_linear_38_12408)"
        stroke="#005C98" stroke-width="2" />
          <defs>
            <linearGradient id="paint0_linear_38_12408" x1="6.5" y1="0.5" x2="6.5" y2="13.5"
             gradientUnits="userSpaceOnUse">
             <stop offset="0.53125" stop-color="#005C98" />
             <stop offset="0.53135" stop-color="#C4C4C4" stop-opacity="0" />
            </linearGradient>
          </defs>
        </svg>
       
                            
  </div>
  <div>
  <p [ngClass]="mapStep1TxtCss"
  *ngIf="!(unit.cfg.lateral == 0 || unit.cfg.lateral == null) && linearConfigStatus">Some text</p>
  </div>
  </div>
  <div class="divMapGraphic">
  <div *ngIf="!btnCreateGrphcShow" class="ellipseEmptyStep">
 
<svg width="13" [ngClass]="pointCClicked" height="14" viewBox="0 0 13 14" fill="none"
  xmlns="http://www.w3.org/2001/svg">
<circle cx="6.5" cy="7" r="5.5" transform="rotate(-90 6.5 7)" fill="url(#paint0_linear_38_12408)"
  stroke="#005C98" stroke-width="2" />
  <defs>
  <linearGradient id="paint0_linear_38_12409" x1="6.5" y1="0.5" x2="6.5" y2="13.5"
  gradientUnits="userSpaceOnUse">
  <stop offset="0.53125" stop-color="#005C98" />
  <stop offset="0.53135" stop-color="#C4C4C4" stop-opacity="0" />
  </linearGradient>
  </defs>
  </svg>
                                
  </div>
  <div>
  <p [ngClass]="mapStep2TxtCss"
  *ngIf="!(unit.cfg.lateral == 0 || unit.cfg.lateral == null) && linearConfigStatus">Some text</p>
                                </div>
                            </div>