CSS clip-path – Kreis, Raute, Ellipse

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 unterstützt auch komplexe Pfade.

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

Freistellen / Beschneiden

So werden Bilder nicht-destruktiv ohne Hintergrund gezeigt – d.h. das Bild muss nicht im Bildbearbeitungsprogramm bearbeitet und dann als PNG oder GIF mit Alpha-Kanal freigestellt werden, sondern bleibt vollständig erhalten.

CSS clip-path bringt einfache Grundformen wie Circle, Ellipse oder Rechteck bereits mit. Beliebig komplexe Pfade maskieren das Bild durch eine url-Referenz auf ein SVG-clipPath-Element.

Die einfachste Variante ist clip-path: inset(top right bottom left) – ein Rechteck. 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 ist).

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

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 wie bei einem Alpha-Kanal. 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.

Das Attribut clipPathUnits="objectBoundingBox" im SVG passt den clipPath an das beschnittene Objekt an.

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

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. Und es sieht so aus, als solle das so bleiben …

Theoretisch kann der clip-path auch in einer externen SVG-Datei liegen, aber diese Option wird bislang von keinem Browser unterstützt.