CSS clip-path | mediaevent.de

CSS clip-path ist der Nachfolger der CSS 2.1-Eigenschaft clip: Das schlichte Rechteck aus CSS 2.1 clip ist (theoretisch) nicht mehr im Spiel.

Während clip durch die rect-Regel nur Rechtecke freistellt, hält clip-path einfache Grundformen aus SVG (rect, polygon, circle, ellipse, inset) bereit und erlaubt selbst komplexe Pfade.

Ein Clip Path (Freistellpfad oder Beschneidungspfad) ist ein geschlossener Vektor, der eine Form definiert. Alles innerhalb der Form ist sichtbar, alles außerhalb der Form ist unsichtbar. Den Freistell- oder Beschneidungspfad kennen wir aus Photoshop, Illustrationsprogrammen und Satzprogrammen.

CSS clip-path kann einfache Grundformen wie Circle, Ellipse oder Rechteck als Freistellpfad oder als Referenz auf ein SVG-clipPath-Element einsetzen.

Die einfachste Variante von clip-path ist weiterhin ein Rechteck, das jetzt inset(top right bottom left) angesprochen wird. Mit top, right, bottom und left gibt inset den Abstand vom Rand des Bildes an und das beschnittene Objekt muss nicht mehr absolut positioniert sein (was bei CSS2.1 clip noch der Fall war).

Links: Angaben für top, right, bottom, left in CSS clip
Rechts: Angaben in CSS3 clip-path

CSS clip-path mit SVG clipPath

CSS clip-path wird nicht für HTML-Elemente, sondern auch für clipPath in SVG verwendet. Was innerhalb SVG clipPath steht, wird nicht direkt gerendert, sondern als Maske über ein anderes Element gelegt. style="clip-path: url(#id)" legt die Maske über ein sichtbares Objekt – sowohl in einer SVG-Grafik als auch über ein HTML-Element.

clip-path erzeugt eine harte Kontur: Es gibt nur »Zeigen« oder «Nicht-Zeigen«, aber keine weichen Übergänge. Weiche Konturen werden mit CSS mask-image erzeugt.

CSS für clip-path

<style>
.clipPath {
   clip-path: url(#clipPath);
      -webkit-clip-path: url(#clipPath);
}
.elliPath {
   clip-path: url(#elliPath);
      -webkit-clip-path: url(#elliPath);
}
</style>

Markup für clip-path

<img class="clipPath" src="twocats" … >
…

<svg width="0" height="0" viewBox="0 0 1 1">
   <clipPath id="clipPath" clipPathUnits="objectBoundingBox">
      <polygon points="0 0.5, 0.5 0, 1 0.5, 0.5 1" />
   </clipPath>
   <clipPath id="elliPath" clipPathUnits="objectBoundingBox">
      <ellipse ry="0.4" rx="0.4" cy="0.5" cx="0.5"  />
   </clipPath>
</svg>

clip-path: url(#id) setzt den SVG-clipPath als CSS-Eigenschaft in ein HTML-Element. Der clip-path kann auch in einer externen SVG-Datei liegen. Das Attribut clipPathUnits="objectBoundingBox" im SVG passt den clipPath an das beschnittene Objekt an.

Soweit wird der clip-path von allen modernen Browsern unterstützt – außer von den üblichen Verdächtigen: nicht von IE und nicht von Edge.

Dann beginnt das Dilemma der CSS3-Eigenschaft clip-path: Safari unterstützt clip-path in externen SVG-Dateien nicht und Safari verarbeitet nur den ersten clip-path korrekt. Firefox unterstützt nur clip-path in der URL-Variante.

Das Chaos beginnt, wenn einmal -webkit-clip-path: url(#someid) notiert wird. Von da an verweigert Safari alle anderen clip-path-Optionen. Erscheint ein url-basierter clip-path an einer weiteren Position, ist die Maske leer und Safari zeigt ein Loch.

clip-path Optionen

Für clip-path gibt es neben der URL-Variation weitere Optionen, die aber von Firefox nicht unterstützt werden.

url(#pathid): ein SVG-Pad – entweder aus Inline-SVG oder einer externen SVG-Datei.
inset (top right bottom left round topleft topright bottomright bottomleft)
: ähnlich wie CSS clip:rect, aber andere Notation der Abstände, zusätzlich die Option auf abgerundete Ecken
inset-rectangle
rectangle
circle (radius at x y): ein Kreis mit Radius und Zentrum bei x,y
ellipse (radiusX radiusY at x y): eine Ellipse mit Radius und Zentrum bei x,y
polygon (x1 y1, x2 y2, … )
: ein Polygon mit Punkten x,y
none: Zurücksetzen und Original zeigen

Browser-Support für clip-path

Bislang unterstützen nur Chrome, Opera und Safari CSS clip-path mit seinen einfachen geometrischen Grundformen inset, circle, ellipse und polygon.

Firefox unterstützt keine der Formen, wohl aber das Einbinden einer SVG-Maske durch die URL-Variante von clip-path. Das wiederum unterstützt Safari nur mit Einschränkungen (keine Pfade aus externen SVG-Dateien, nur das erste Element mit einem clip-path in der URL-Form wird angezeigt).

Nur Chrome und Opera unterstützen alle Optionen von clip-path korrekt.

clip-path Support in Internet Explorer und Microsoft Edge … na, was wohl? Nichts davon.