SVG image with clip-path not clipping properly

I am trying to add a clipping mask to set of images on SVG. But the images are not showing properly.

 
    <g  *ngFor="let node of nodeList" [attr.transform] = "'translate(0,1460) scale('+node.scalingFactor+' '+node.scalingFactor+')'"  [attr.transform-origin]="''+node.x+' '+node.y+''" >
       
      <clipPath [attr.id]="'imageclip_' + i">
        <circle  shape-rendering="optimizeSpeed" r="60"  [attr.cx]="node.x" [attr.cy]="node.y" stroke="black"  stroke-width="0" fill="black"  />
      </clipPath>
      
      <image style="cursor: pointer;"  [attr.clip-path]="'url(#imageclip_' + i + ')'" height = 120  [attr.x] = "node.x" [attr.y] = "node.y" transform="translate(-45 -60)" [attr.href]="node.imageUrl" />
 
    </g>

But when I inspect on google chrome, it shows all the elements are in correct places. But the images are not displaying properly. What can I do to display the images properly.

I found the problem after a little while. I have missed to define the i in the id of clip path. After I defined it, problem sorted. Final solution is here.

<g  *ngFor="let node of nodeList; let i=index" [attr.transform] = "'translate(0,1460) scale('+node.scalingFactor+' '+node.scalingFactor+')'"  [attr.transform-origin]="''+node.x+' '+node.y+''">
    <clipPath [attr.id]="'imageclip_' + i">
        <circle  shape-rendering="optimizeSpeed" r="60"  [attr.cx]="node.x" [attr.cy]="node.y" stroke="black"  stroke-width="0" fill="black"  />
    </clipPath>
      
    <image style="cursor: pointer;"  [attr.clip-path]="'url(#imageclip_' + i + ')'" height = 120  [attr.x] = "node.x" [attr.y] = "node.y" transform="translate(-45 -60)" [attr.href]="node.imageUrl" />
</g>