overflow:hide clips my svg mask in the wrong place :(
P粉885035114
P粉885035114 2023-09-13 21:45:29
0
1
601

I'm trying to create a profile picture where you can change the color of your hoodie.

Image 1 - Overflow: None

Picture 2 -overflow:hidden

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

Are there other ways to do this, or maybe anyone more experienced can 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 view the attached pictures.

Thanks

P粉885035114
P粉885035114

reply all(1)
P粉982881583

I think I found the solution:

Clip path: Circle(50%);

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template