CSS offset-path Eigenschaft

Definition und Verwendung

offset-path Diese Eigenschaft wird verwendet, um einen Pfad für das animierte Element zu erstellen.

Erstellen Sie für die Animation <div> einen Pfad:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

Wert	Beschreibung
none	Standard. Der Standardwert der offset-path-Eigenschaft des Elements.
path()	Verwenden Sie die SVG-Syntax zur Spezifizierung des Pfades. Siehe:SVG-Pfad.
ray()	Verwenden Sie die CSS-Funktion ray() zur Spezifizierung des Pfades.
url()	Verwenden Sie die URL einer SVG-Datei, um den Pfad zu spezifizieren.
<basic-shape>	Verwenden Sie CSS-Funktionen (wie inset(), circle(), ellipse() oder polygon()) zur Definition grundlegender Formen, um den Pfad zu spezifizieren.
<coord-box>	Verwenden Sie den Koordinatenrahmen, um den Pfad zu spezifizieren.
initial	Setzt diese Eigenschaft auf ihren Standardwert. Siehe initial.
inherit	Diese Eigenschaft wird von ihrem Elternelement geerbt. Siehe inherit.

Standardwert:	none
Vererbbarkeit:	Nein
Animationserstellung:	Unterstützt. Siehe:Eigenschaften zur Animation.
Version:	CSS3
JavaScript-Syntax:	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

Die Zahlen in der Tabelle stellen die Versionen der Browser dar, die diese Eigenschaft vollständig unterstützen.

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45