Heim > Fragen und Antworten > Hauptteil
Ich versuche ein Profilbild zu erstellen, bei dem du die Farbe deines Hoodies ändern kannst.
Bild 1 – Überlauf: Keiner
Bild 2 -Überlauf:versteckt
Wenn ich jedoch den Überlauf ausblenden möchte, damit er in den Kreis passt, wird die SVG-Maske an der falschen Stelle abgeschnitten.
Gibt es eine andere Möglichkeit, dies zu tun, oder kann mir vielleicht jemand mit mehr Erfahrung sagen, wo ich falsch liege?
.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>
Bitte sehen Sie sich die beigefügten Bilder an.
Danke