Größe eines Bildes an einen kreisförmigen SVG-Pfad anpassen

Beim Versuch, einen kreisförmigen Teil aus einem Bild mithilfe eines SVG-Pfads auszuschneiden, ist dies wichtig um eine ordnungsgemäße Ausrichtung zu gewährleisten. Wenn das Bild nicht gut passt, kann dies an einer falschen Größe oder Positionierung der SVG-Maske liegen.

Hier ist ein alternativer Ansatz, um das gewünschte Ergebnis zu erzielen:

Verbesserung mit eine SVG-Maske:

Diese Methode verwendet eine SVG-Maske, um ein kreisförmiges Loch zu erzeugen, in dem das Bild angezeigt wird:

Erläuterung:

• #hole: Dies definiert die SVG-Maske mit zwei Kreisen, einem weißen und einem schwarzen. Der weiße Kreis stellt den anzuzeigenden Bereich dar, während der schwarze Kreis eine Maske erstellt, um den Bereich außerhalb des Kreises auszublenden.
• #img: Das SVG-Muster definiert ein Muster mithilfe eines Bildes. Das Attribut „patternUnits="userSpaceOnUse" stellt sicher, dass sich das Muster an die Form anpasst, auf die es angewendet wird.
• Das rect-Element füllt den gesamten SVG-Container mit dem #img-Muster und wendet die #hole-Maske an, um den kreisförmigen Ausschnitt sichtbar zu machen.

Mit diesem verbesserten Ansatz sollte das Bild jetzt richtig in die kreisförmige SVG-Maske passen.