Kreisförmige Abschnitte aus einem Bild mit SVG ausschneiden

Ihr aktueller Versuch, mit einem Clip-Pfad einen kreisförmigen Abschnitt aus einem Bild auszuschneiden, wird nicht richtig ausgerichtet. Um dieses Problem anzugehen, untersuchen wir einen anderen Ansatz mit Masken in SVG.

Dieser Code erstellt eine SVG-Datei mit einem rosa Hintergrund. Innerhalb des Defs-Elements definieren wir eine Maske namens „hole“. Diese Maske besteht aus zwei Kreisen: einem großen weißen Kreis, der den kreisförmigen Bereich darstellt, den Sie aus dem Bild behalten möchten, und einem kleineren schwarzen Kreis, der den Ausschnitt bestimmt.

Das nächste Element ist ein Muster namens „img“. Dieses Muster gibt das Bild an, das Sie als Füllung für die Form verwenden möchten. Wir stellen die Abmessungen des Musters so ein, dass sie mit der Größe der SVG-Datei übereinstimmen, und verwenden ein Bild von einer URL.

Schließlich erstellen wir ein Rechteck, das den gesamten Raum der SVG-Datei ausfüllt. Die Füllung des Rechtecks ​​ist so eingestellt, dass sie auf das „img“-Muster verweist, und wir wenden die „hole“-Maske an, um den kreisförmigen Abschnitt auszuschneiden.