overflow:hidden clips my svg mask in the wrong place :(

Question

I am trying to create a profile picture where you can change the colour of the hoodie.

Image 1 - overflow:none

Image 2 -overflow:hidden

However, when I want to hide overflow so it fits the circle it clips the svg mask in the wrong place.

Is there another way I could do this or perhaps anyone more experienced could let me know where I'm going wrong ?

.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;
}

<div class="memoji-wrap">
      <div id="memoji-container">
        <svg
          id="product-svg"
          data-name="Layer 1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 109.67 125.67"
        >
          <path
            id="product-shape"
            class="cls-1"
            d="m.2,125.5l.39-8.68.35-10.82.32-7.02s.32-2.74.74-4.04,1.51-3.72,1.51-3.72l3.16-3.65v-.35l-.67-.74.49-1.51s1.9-2.67,2.04-3.51.63-2.18.63-2.18l1.72-2.14,3.27-2.11,4.39-2.18,2.07-.56,2.56.77.18.25v3.41s7.76,7.83,9.55,8.78,3.23,1.05,3.23,1.05c0,0,3.27-.18,4.14-.84s.95-1.93.95-1.93c0,0,.46-2.04.49-2.6s.35-2.63.35-2.63l.28-2.21v-2.56s-.42.25-.74-.21.32-.91.32-.91c0,0,7.99-3.67,9.95-6.95,0,0,1.01-.14,1.12,0s0,1.4,0,1.4c0,0,5.57-.64,6.59-.44,0,0,4.17,1.46,5.34,2.6s15.17,13.92,15.17,13.92c0,0-1.63-16.16-.38-17.01s1.55-1.55,1.55-1.55v-8.31s.23-.29.47-.29h13.22s.58,7.67,1.05,7.79,2.28,1.98,2.92,3.38,1.17,4.11,1.17,4.11l1.34,8.87.38,6.62s.96,13.25.93,14.59-.5,4.81-.73,5.16-1.6,4.43-4.49,6.24-7.96,1.23-7.96,1.23c0,0-4.46-1.49-5.72-2.28s-13.19-11.03-13.19-11.03c0,0-4.35-4.03-5.34-4.73s-1.05-.96-1.05-.96c0,0-.76-.12-1.11.12s-.79.7-.79.7l-.15,4.35s.82,6.94.99,7.5,1.02,10.18.9,10.47.61,7.53.61,7.53l-64.53-.17Z"
          />
        </svg>
        <img id="background-image" src="img/IMG_Mem.png" alt="" />
      </div>
    </div>

Please review attached images.

Thank you

Answer 1

I think I found the solution:

clip-path: circle(50%);