CSS offset-path Eigenschaft
Die CSS-Eigenschaft offset-path legt den Pfad fest, dem ein Element folgt. Werte und Beispiele erklärt.
Die CSS-Eigenschaft offset-path definiert einen geometrischen Pfad, entlang dessen ein Element positioniert und bewegt werden kann. Sie ist Teil des Motion Path Module, einer Gruppe von CSS-Eigenschaften, die es ermöglichen, ein Element entlang eines beliebigen Pfades zu animieren — eine Kurve, eine Linie oder die Kontur einer SVG-Form — anstatt auf geradlinige top/left-Übergänge beschränkt zu sein.
Allein beschreibt offset-path nur die Strecke. Die tatsächliche Position des Elements auf dieser Strecke wird durch die Eigenschaft offset-distance festgelegt (0% = Anfang des Pfades, 100% = Ende). Die Animation von offset-distance von 0% auf 100% lässt das Element den Pfad durchlaufen.
Wann sollte ich es verwenden?
Setzen Sie offset-path ein, wenn Sie eine Bewegung entlang einer echten Kurve benötigen, die mit keyframe-basierten transform: translate()-Schritten schwer umzusetzen wäre — zum Beispiel ein Planet, der auf einer Ellipse kreist, ein Marker, der eine kurvenreiche Straße entlanggleitet, oder ein Symbol, das um ein SVG-Logo herum schleift. Da der Browser die Position entlang des Pfades interpoliert, bleibt die Bewegung unabhängig von der Komplexität der Kurve gleichmäßig.
Im früheren Entwurf der Spezifikation hieß diese Eigenschaft motion-path. Sie wurde in offset-path umbenannt, weil die Eigenschaft statische Positionen auf einem Pfad definiert (die Animation erfolgt durch offset-distance), und die alten motion-*-Namen sind nun veraltet.
Die Eigenschaft offset-path selbst ist nicht animierbar — sie definiert nur den Pfad. Die Bewegung entsteht durch die Animation von offset-distance (typischerweise mit einer @keyframes-Regel), während offset-rotate steuert, ob das Element sich in die Bewegungsrichtung dreht.
Wenn Sie offset-path in CSS definiert haben, können Sie die Bewegung auch über JavaScript steuern, indem Sie offset-distance im Laufe der Zeit aktualisieren.
Verwandte offset-Eigenschaften
Das Motion Path Module besteht aus einer kleinen Familie von Eigenschaften — offset-path steht im Mittelpunkt:
- offset-distance — wie weit das Element entlang des Pfades positioniert ist.
- offset-rotate — ob das Element sich in die Richtung des Pfades dreht.
- offset-position — der Ausgangspunkt, wenn der Pfad selbst relativ ist.
- offset-anchor — welcher Punkt des Elements am Pfad befestigt ist.
- offset — die Kurzschreibweise, die alle oben genannten Eigenschaften auf einmal setzt.
| Anfangswert | none |
|---|---|
| Gilt für | Transformierbare Elemente. |
| Vererbt | Nein. |
| Animierbar | Nein. |
| Version | Motion Path Module Level 1 |
| DOM-Syntax | object.style.offsetPath = "ray()"; |
Syntax
offset-path: none | ray() | path() | url() | <basic-shape>;Einige Hinweise zu den Pfadfunktionen:
path("...")nimmt einen SVG-Pfad-String (dieselbed-Attributsyntax, die von<path>verwendet wird). Es ist die flexibelste Option und wird am besten unterstützt.ray(45deg)zeichnet eine gerade Linie vom Startpunkt des Elements nach außen im angegebenen Winkel.url(#myPath)verwendet die Geometrie einer SVG-Form, die bereits im Dokument vorhanden ist und über ihreidreferenziert wird.- Eine
<basic-shape>wiecircle(),ellipse(),inset()oderpolygon()ermöglicht die Erstellung gängiger Pfade ohne direktes SVG-Schreiben.
Beispiel: Animation entlang eines SVG-Pfades
Hier folgt ein grün-blau gemustertes Quadrat einem gekrümmten SVG-Pfad. Die @keyframes-Regel treibt offset-distance von seinem Standard 0% auf 100%, und offset-rotate: reverse hält das Quadrat auf der Kurve ausgerichtet, während es sich bewegt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path property example</h2>
<div class="mover"></div>
</body>
</html>Beispiel: Elemente an festen Punkten auf einem Pfad platzieren
Der Pfad muss überhaupt nicht animiert werden. Das Setzen eines festen offset-distance-Wertes parkt das Element einfach an diesem Punkt entlang der Strecke — nützlich, um Boxen entlang einer gemeinsamen Kurve anzuordnen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
none | Es ist kein Bewegungspfad angegeben. Dies ist der Standardwert. |
ray() | Ein Liniensegment, das von der Position der Box aus in die durch den angegebenen Winkel definierte Richtung verläuft, z. B. ray(45deg). |
path() | Ein SVG-Pfad-String, z. B. path("M 0 0 L 100 100"), der direkt als Pfad verwendet wird. |
url() | Referenziert die id einer SVG-Form, die als Bewegungspfad verwendet werden soll, z. B. url(#myPath). |
<basic-shape> | Eine Formfunktion: circle(), ellipse(), inset() oder polygon(). |
Browser-Unterstützung
offset-path wird in allen aktuellen Versionen von Chrome, Edge, Firefox, Safari und Opera unterstützt. Der path()-Wert ist am weitesten verbreitet; Unterstützung für ray() und <basic-shape>-Werte kam später, daher sollten diese bei der Ausrichtung auf ältere Browser getestet werden. Der veraltete motion-path-Name ist veraltet und sollte nicht mehr verwendet werden.