search

Home  >  Q&A  >  body text

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

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粉885035114P粉885035114514 days ago659

reply all(1)I'll reply

  • P粉982881583

    P粉9828815832023-09-14 17:11:49

    I think I found the solution:

    Clip path: Circle(50%);

    reply
    0
  • Cancelreply