带有剪辑路径的 SVG 图像未正确剪辑答案

【问题标题】：SVG image with clip-path not clipping properly带有剪辑路径的 SVG 图像未正确剪辑
【发布时间】：2022-02-01 01:38:33
【问题描述】：

我正在尝试为 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>

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

【问题讨论】：

标签： image svg clip-path image-clipping

【解决方案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>

【讨论】：