0

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

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

4

1 回答 1

0

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

<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>
于 2022-01-31T10:01:22.457 回答