offset-path

Die offset-path Eigenschaft nimmt als Wert ein Wert, einen Wert, oder beides, oder das Schlüsselwort none an. Der Wert ist eine ray() Funktion, ein Wert oder ein Wert.

none

Gibt an, dass das Element keinem Offset-Pfad folgt. Der none Wert entspricht dem, dass das Element keine offset transform hat. Die Bewegung des Elements wird in diesem Fall durch seine Standardpositionseigenschaften bestimmt, wie top und left, anstatt durch einen Offset-Pfad. Dies ist der Standardwert.

Eine ray() Funktion, ein Wert oder ein Wert, der den geometrischen Offset-Pfad angibt. Wird dieser Wert weggelassen, ist die Pfadform für den Wert inset(0 round X), wobei X der Wert des border-radius des Elements ist, das den containing block festlegt.

ray()

Definiert eine Linie, die an einer bestimmten Position beginnt, eine bestimmte Länge hat und in einem bestimmten Winkel verläuft. Die ray() Funktion akzeptiert bis zu vier Parameter – einen , einen optionalen Größenwert, das optionale Schlüsselwort contain, und ein optionales at .

Gibt die ID eines SVG-Formelements an. Der Pfad ist die Form des SVG , , , , , , oder Elements, das durch seine id in der url() Funktion referenziert wird. Wenn die URL kein Formelement referenziert oder anderweitig ungültig ist, ist der aufgelöste Wert für den Offset-Pfad path("M0,0") (was ein gültiger Wert ist).

Gibt den Offset-Pfad als den äquivalenten Pfad einer CSS-Basisform-Funktion an, wie circle(), ellipse(), inset(), path(), polygon(), rect(), oder xywh(). Wenn zum Beispiel das eine ellipse() Funktion ist, dann ist der Pfad der Umriss der Ellipse, beginnend am rechten Punkt der Ellipse, im Uhrzeigersinn durch eine volle Rotation fortschreitend. Für ellipse() und circle(), die den Parameter at akzeptieren, wenn die weggelassen wird, ist die Position standardmäßig center, es sei denn, das Element hat einen offset-position angegeben. In diesem Fall wird der offset-position Wert für den at Parameter verwendet. Komplexere Formen können mit der shape() Funktion definiert werden.

Gibt die Größeninformationen des Referenzkastens an, der den Pfad enthält. Der Referenzkasten wird vom Element abgeleitet, das den containing block für dieses Element festlegt. Dieser Parameter ist optional. Wenn nicht angegeben, ist der Standardwert border-box in CSS-Kontexten. In SVG-Kontexten wird der Wert als view-box behandelt. Wenn ray() oder verwendet wird, um den Offset-Pfad zu definieren, liefert der Wert den Referenzkasten für den Strahl oder das , jeweils. Wenn verwendet wird, um den Offset-Pfad zu definieren, liefert der Wert das Ansichtsfenster und das Benutzerkoordinatensystem für das Formelement, mit dem Ursprung (0 0) in der oberen linken Ecke und einer Größe von 1px.

Die offset-path Eigenschaft definiert einen Pfad, dem ein animiertes Element folgen kann. Ein Offset-Pfad ist entweder ein spezifizierter Pfad mit einem oder mehreren Unterpfaden oder die Geometrie einer nicht gestalteten Basisform. Die genaue Position des Elements auf dem Offset-Pfad wird durch die Eigenschaft offset-distance bestimmt. Jede Form oder jeder Pfad muss eine Anfangsposition für den berechneten Wert von 0 für offset-distance und eine Anfangsrichtung definieren, die die Rotation des Objekts zur Anfangsposition angibt.

Frühe Versionen der Spezifikation nannten diese Eigenschaft motion-path. Sie wurde in offset-path umbenannt, weil die Eigenschaft statische Positionen beschreibt, nicht Bewegungen.

offset-path = 
  none                          |
   ||   

 = 
          |
            |
    

 = 
    |
  view-box     

 = 
  ray(           &&
  ?           &&
  contain?              &&
  [ at  ]? )  

 = 
    |
    

 = 
    |
  fill-box      |
  stroke-box    

 = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

 = 
  [ left | center | right | top | bottom |  ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right |  ] [ top | center | bottom |  ]  |
  [ [ left | right ]  ] && [ [ top | bottom ]  ]  

 = 
  url(  * )  |
                        

 = 
  src(  * )  

 = 
  content-box  |
  padding-box  |
  border-box   

 = 
        |
    

Dieses Beispiel zeigt die Verwendung verschiedener Werte in der offset-path Eigenschaft.

body {
  width: 300px;
  height: 200px;
  border-radius: 50px;
  border: dashed aqua;
  border-width: 25px;
  padding: 25px;
  margin: 50px;
}

.box {
  width: 40px;
  height: 20px;
  animation: move 8000ms infinite ease-in-out;
}

.blueBox {
  background-color: blue;
  offset-path: border-box;
  offset-distance: 5%;
}

.greenBox {
  background-color: green;
  offset-path: padding-box;
  offset-distance: 8%;
}

.redBox {
  background-color: red;
  offset-path: content-box;
  offset-distance: 12%;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

In diesem Beispiel wurden absichtlich große Werte für Außenabstand, Rahmen und Füllung festgelegt, um die Platzierung der blauen, grünen und roten Rechtecke auf ihren jeweiligen Rändern zu demonstrieren: border-box, padding-box und content-box.

Ergebnis

In diesem Beispiel erstellt das Element ein Haus mit einem Schornstein und definiert auch zwei Hälften einer Schere. Das Haus und der Schornstein bestehen aus Rechtecken und Polygonen, und die Scherenhälften werden durch zwei verschiedene Path-Elemente dargestellt. Im CSS-Code wird die offset-path Eigenschaft verwendet, um einen Pfad für die beiden Scherenhälften festzulegen. Dieser im CSS definierte Pfad ist identisch mit dem, der durch das Element im SVG dargestellt wird, das ist der Umriss des Hauses einschließlich des Schornsteins.

.scissorHalf {
  offset-path: path(
    "M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190"
  );
  animation: follow-path 4s linear infinite;
}

@keyframes follow-path {
  to {
    offset-distance: 100%;
  }
}

Ergebnis

Ohne die offset-path Eigenschaft würden die beiden Hälften der Schere standardmäßig in der oberen linken Ecke der Leinwand landen. Mithilfe von offset-path sind die beiden Scherenhälften jedoch mit dem Startpunkt des SVG-Pfades ausgerichtet, wodurch sie sich entlang desselben bewegen können.

Dieses Beispiel veranschaulicht, wie auf eine SVG-Form verwiesen wird, um die Form des Pfades zu definieren, dem ein Element folgen kann. Der grüne Kreis (definiert durch .target) folgt dem Pfad eines Rechtecks, das durch Übergabe der ID der SVG-Form (svgRect) an die offset-path Eigenschaft mit url() definiert wird.

Das SVG-Rechteck, das die Pfadform definiert, wird hier nur gezeigt, um visuell zu demonstrieren, dass der grüne Kreis tatsächlich dem Pfad folgt, der durch dieses Rechteck definiert ist.

.outer {
  position: absolute;
}

.target {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: green;
  offset-path: url(#svgRect);
  offset-anchor: auto;
  animation: move 5s linear infinite;
}

#svgRect {
  fill: antiquewhite;
  stroke: black;
  stroke-width: 2;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

• offset
• offset-distance
• offset-rotate
• SVG
• path()
• Weitere Demos:
  • Beispiele mit verschiedenen shapes Werten auf CodePen von CSS-Tricks
  • Bewegung eines Dreiecks entlang eines gekrümmten Pfads auf CodePen von Eric Willigers
  • Bewegung eines Paares Scheren entlang der Form eines Hauses auf CodePen von Eric Willigers
  • Bewegung mehrerer Augenpaare auf JSFiddle von Eric Willigers