我正在尝试创建一张个人资料图片，您可以在其中更改连帽衫的颜色。

图片 1 - 溢出：无

图片 2 -overflow:hidden

但是，当我想隐藏溢出以使其适合圆圈时，它会将 svg 蒙版剪辑在错误的位置。

还有其他方法可以做到这一点，或者也许任何更有经验的人都可以让我知道我哪里出错了？

.memoji-wrap {
  width: 80px;
  height: 80px;
  background: #f6f6f6;
  border-radius: 50%;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

#memoji-container {
  position: relative;

  width: 60px;
  left: 3px;
  top: 5px;
}

#product-svg {
  position: relative;
  z-index: 2;
  mix-blend-mode: multiply;
}

#product-shape {
  fill: #dbed64;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

请查看所附图片。

谢谢