CSS clip-path: url(#clipPath) mit SVG-Pfad oder clip-path: path()

clip-path: Bilder ohne Hintergrund: Freistellen / Beschneiden beliebiger Formen

So werden Bilder nicht-destruktiv ohne Hintergrund gezeigt. D.h., das Bild muss nicht im Bildbearbeitungsprogramm bearbeitet und als WebP, PNG oder GIF mit Alpha-Kanal gespeichert werden, sondern bleibt vollständig erhalten. Der Pfad wird in SVG als clipPath angelegt und in CSS als clip-path: url(#path) aufgerufen – ähnlich wie clip-path: polygon(), das aber auf gerade Kanten eingeschränkt ist.

Komplexe Formen mit geraden Kanten und runden Bögen wie Herzen, Tropfen, Blätter oder eine Mondsichel entstehen mit der URL (Adresse) eines SVG-Pfades.

<img width="640" height="640" 
   src="sonne.webp" alt="…" class="raute" 
	srcset="sonne.webp 420w, 
			sonne.webp 640w" 
	sizes="(max-width: 420px) 100vw, 640px">

<img width="640" height="640" 
   src="mond.webp" alt="…" class="mond" 
	srcset="mond.webp 420w, 
			mond.webp 640w" 
	sizes="(max-width: 420px) 100vw, 640px">

Für clip-path: polygon() reicht CSS clip-path, aber für die runden Bögen ist ein SVG clipPath verantwortlich, der als clip-path: url() ins CSS übernommen wird.

<svg  width="0" height="0" viewBox="0 0 100 100">
<clipPath id="mond" clipPathUnits="objectBoundingBox">
	<path transform="scale(0.01, 0.01)" 
	      d="m56.5 2.3a48.15 48.15 0 0 0-48.1…4.7z"/>
</clipPath>

clip-path: url(#id) setzt den SVG-clipPath als CSS-Eigenschaft in ein HTML-Element.

SVG clipPath an CSS clip-path anpassen

SVG-Pfade werden fast immer in einem grafische SVG-Editor wie Illustrator, Affinity Design oder Inkscape angelegt. Die Grafikprogramme legen die Koordinaten der Punkte so wie in diesem Beispiel in absoluten Werten an, aber für CSS werden relative Werte benötigt.

Das Attribut clipPathUnits="objectBoundingBox" des SVG clipPath-Elements passt den clipPath an das beschnittene Objekt an. Für objectBoundingBox müssen die Werte des Pfads zwischen 0 und 1 liegen. Darum ist der Pfad in diesem Beispiel transformiert. Die Werte für transform="scale()" werden einfach aus der Breite und Höhe der viewBox entwickelt:

1/100 = 0.01
1/100 = 0.01

Reiner CSS clip-path: path()

Eine jüngere Variante vereinfacht das Einsetzen eines clip-path mittels CSS: Anstelle der Referenz auf einen SVG-Pfad, der mit clipPath definiert ist, tritt die CSS-Funktion path(). Damit kann der Vektor für den Pfad direkt eingegeben werden und der Umweg über SVG clipPath wird nicht mehr benötigt.

Der Pfad ist eine einfache Zeichenkette, die mit M beginnt und mit Z endet, und legt die Punkte als kommagetrennte Wertpaare x,y an. Im Vergleich zu clip-path: url() muss der Beschneidungspfad einige Einschränkungen hinnehmen: Die Punkte sind absolute Pixelwerte (px) und der Pfad kann nicht durch die var()-Funktion beschrieben werden.

<img class="path" width="320" height="320" 
	src="mond.webp" alt="">

.path {
	max-width: 100%;
	height: auto;
	clip-path: path("m 125,134 c 0,0 10,-27 35,-27 25,0 35,27 35,27 v 77 h -70 z");
	animation: morph 10s infinite;
}

@keyframes morph {
	0% {
		clip-path: path("m 125,134 c 0,0 9.94191,-27 35,-27 25,0 35,27.542 35,27 v 77 h -70 z");
	}
	
	100% {
		clip-path: path("m 55,84 c 0,0 29,-82 104,-82 74,0 104,82 104,82 V 317 H 55 Z")
	}
}

Diese Variante kommt insbesondere der Animation des clip-path entgegen, denn sie spart das SVG-Element.