cari

Rumah  >  Soal Jawab  >  teks badan

limpahan:sembunyikan klip topeng svg saya di tempat yang salah :(

Saya cuba membuat gambar profil di mana anda boleh menukar warna hoodie anda.

Imej 1 - Limpahan: Tiada

Gambar 2 -limpahan:tersembunyi

Namun, apabila saya ingin menyembunyikan limpahan supaya ia sesuai dengan bulatan, ia menjepit topeng svg di tempat yang salah.

Adakah ada cara lain untuk melakukan ini atau mungkin sesiapa yang lebih berpengalaman boleh memberitahu saya di mana silap saya?

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

Sila lihat gambar yang dilampirkan.

Terima kasih

P粉885035114P粉885035114466 hari yang lalu621

membalas semua(1)saya akan balas

  • P粉982881583

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

    Saya rasa saya jumpa penyelesaiannya:

    Laluan klip: Bulatan (50%);

    balas
    0
  • Batalbalas