CSS/Funktionen/path()

Die path()-Funktion beschreibt einen Pfad.

Parameter	Syntax path( [<'fill-rule'>,]?<string> ] , <track-list> ) <fill-rule>: legt fest, ob die Form ganz oder nur teilweise gefüllt wird. (Siehe: fill-rule) string: Zeichenkette aus aus Punkten (Koordinaten) und Kommandos (Übersicht) (Siehe: d (data-string))
anwendbar auf	* clip-path d offset-path shape-outside
Browsersupport	caniuse: {{{caniuse}}}

Beispiel

img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  clip-path: path('m 300,300 
                   l-100,-100 
                   a 50,50 90 0,1 100,-75 
                   a 50,50 90 0,1 100,75 
                   z'); 
  margin: 0;
}

Das Bild wird entsprechend der Pfadangabe zu einem Herz ausgeschnitten.

Weblinks

• CSSWG.org: the path() notation
• MDN: path()

Browserunterstützung

caniuse.com

Siehe auch

• SVG/Tutorials/Pfade - Übersicht über alle Pfadkommandos
• CSS/Tutorials/Masken und Beschneidungen/clip-path path()-Funktion für Beschneidungen
• CSS/Tutorials/Animation/offset#offset-path Animation entlang von Pfaden
• SVG/Tutorials/Shape-Morphing#d_als_Präsentationsattribut