我正在嘗試創建一張個人資料圖片，您可以在其中更改連帽衫的顏色。
圖片 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;
}
<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>
請查看所附圖片。 謝謝###
