CSS/Funktionen/xywh()

Browserunterstützung
caniuse.com

Die CSS-Funktion xywh() erzeugt ein Rechteck, dessen Werte dem des SVG-rect-Elements entsprechen.

anwendbar auf

• clip-path
• offset-path

Parameter

Syntax

offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px); clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);

• vier Längenangaben, Prozentwerte
• optional das Schlüsselwort round
  • gefolgt von ein bis vier Längenangaben

Beispiel

offset-path: xywh(0 1% 2px 3% round 0 1px 2% 3px);
clip-path: xywh(1px 2% 3px 4em round 0 1% 2px 3em);

 

Siehe auch

• 

  Masken und Beschneidungen

  path()-Funktion für Beschneidungen

   
• Pfad-Animationen

  CSS-Animation entlang von Kurven, Schleifen und elliptischen Umlaufbahnen

   

Weblinks

• CSSWG.org: xywh()
• MDN: xywh()
• Browser-Support: caniuse.com