带有剪辑路径的 SVG 图像无法正确剪辑

Question

我正在尝试为 SVG 上的图像集添加剪贴蒙版。但是图像显示不正确。

 
    <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>

但是当我检查 google chrome 时，它显示所有元素都在正确的位置。但图像显示不正确。我该怎么做才能正确显示图像。

Answer 1

过了一会儿我发现了问题。我错过了在剪辑路径的 id 中定义 i。在我定义它之后，问题就解决了。最终解决方案在这里。

<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>

带有剪辑路径的 SVG 图像无法正确剪辑

SVG image with clip-path not clipping properly

image

svg

clip-path

image-clipping