offset-path

Die offset-path-Eigenschaft nimmt einen <offset-path>-Wert, einen <coord-box>-Wert oder beide, oder das Schlüsselwort none als Wert an. Der <offset-path>-Wert ist eine ray()-Funktion, ein <url>-Wert oder ein <basic-shape>-Wert.

none

Gibt an, dass das Element keinem offset-Pfad folgt. Der Wert none entspricht dem Fall, dass das Element keine offset-Transformation hat. Die Bewegung des Elements wird in diesem Fall durch seine Standardpositions-Eigenschaften, wie top und left, anstelle eines offset-Pfads bestimmt. Dies ist der Standardwert.

<offset-path>

Eine ray()-Funktion, ein <url>-Wert oder ein <basic-shape>-Wert, der den geometrischen Offset-Pfad festlegt. Wird dieser Wert weggelassen, ist die Pfadform für den <coord-box>-Wert inset(0 round X), wobei X der Wert von border-radius des Elements ist, das den Kontextblock erstellt.

ray()

Definiert eine Linie, die an einer bestimmten Position beginnt, eine bestimmte Länge hat und sich im angegebenen Winkel erstreckt. Die ray()-Funktion akzeptiert bis zu vier Parameter – einen <angle>, einen optionalen Größenwert, das optionale Schlüsselwort contain und optional at <position>.

<url>

Gibt die ID eines SVG-Formelements an. Der Pfad ist die Form des SVG-<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline> oder <rect>-Elements, auf das durch seine id in der url()-Funktion verwiesen wird. Wenn die URL nicht auf ein Formelement verweist oder anderweitig ungültig ist, ist der gelöste Wert für den Offset-Pfad path("M0,0") (was ein gültiger <basic-shape>-Wert ist).

<basic-shape>

Gibt den Offset-Pfad als den äquivalenten Pfad einer CSS-Basisformfunktion an, wie zum Beispiel circle(), ellipse(), inset(), path(), polygon(), rect() oder xywh(). Zum Beispiel, wenn der <basic-shape> eine ellipse()-Funktion ist, dann ist der Pfad die Umrandung der Ellipse, beginnend am rechten Punkt der Ellipse und im Uhrzeigersinn durch eine vollständige Rotation. Für ellipse() und circle(), die den Parameter at <position> akzeptieren, falls <position> weggelassen wird, ist die Position standardmäßig center, es sei denn, das Element hat eine spezifizierte offset-position. In diesem Fall wird der offset-position-Wert für den Parameter at <position> verwendet. Komplexere Formen können unter Verwendung der shape()-Funktion definiert werden.

<coord-box>

Gibt die Größeninformationen des Referenzrahmens an, der den Pfad enthält. Der Referenzrahmen wird von dem Element abgeleitet, das den Kontextblock für dieses Element erstellt. Dieser Parameter ist optional. Wenn nicht angegeben, lautet der Standardwert border-box in CSS-Kontexten. In SVG-Kontexten wird der Wert als view-box behandelt. Wenn ray() oder <basic-shape> zur Definition des Offset-Pfads verwendet wird, stellt der <coord-box>-Wert den Referenzrahmen für den Ray oder die <basic-shape>-Form dar. Wenn <url> zur Definition des Offset-Pfads verwendet wird, bietet der <coord-box>-Wert das Ansichtsfenster und das Benutzerkoordinatensystem für das Formelement, wobei der Ursprung (0 0) in der oberen linken Ecke liegt und die Größe 1px beträgt.

Die offset-path-Eigenschaft definiert einen Pfad, dem ein animiertes Element folgen kann. Ein Offset-Pfad ist entweder ein angegebener 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 anfängliche Position für den berechneten Wert von 0 für offset-distance und eine anfängliche Richtung definieren, die die Rotation des Objekts zur anfänglichen Position festlegt.

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

offset-path = 
  none                          |
  <offset-path> || <coord-box>  

<offset-path> = 
  <ray()>        |
  <url>          |
  <basic-shape>  

<coord-box> = 
  <paint-box>  |
  view-box     

<ray()> = 
  ray( <angle>          &&
  <ray-size>?           &&
  contain?              &&
  [ at <position> ]? )  

<url> = 
  <url()>  |
  <src()>  

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<ray-size> = 
  closest-side     |
  closest-corner   |
  farthest-side    |
  farthest-corner  |
  sides            

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<length-percentage> = 
  <length>      |
  <percentage>  

Dieses Beispiel demonstriert die Verwendung verschiedener <coord-box>-Werte in der offset-path-Eigenschaft.

<div class="box blueBox"></div>
<div class="box redBox"></div>
<div class="box greenBox"></div>

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 Rand, Rahmen und Polsterung absichtlich mit großen Werten versehen, um die Platzierung der blauen, grünen und roten Rechtecke an ihren jeweiligen <coord-box>-Kanten zu demonstrieren: border-box, padding-box und content-box.

Ergebnis

In diesem Beispiel erstellt das <svg>-Element ein Haus mit 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 unterschiedliche Pfadelemente dargestellt. Im CSS-Code wird durch die offset-path-Eigenschaft ein Pfad angegeben, dem die beiden Scherenhälften folgen sollen. Dieser CSS-definierte Pfad ist identisch mit dem, der durch das <path>-Element im SVG dargestellt wird, das die Umrisse des Hauses einschließlich des Schornsteins darstellt.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="700"
  height="450"
  viewBox="350 0 1400 900">
  <title>House and Scissors</title>
  <rect x="595" y="423" width="610" height="377" fill="blue" />
  <polygon points="506,423 900,190 1294,423" fill="yellow" />
  <polygon points="993,245 993,190 1086,190 1086,300" fill="red" />
  <path
    id="house"
    d="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"
    fill="none"
    stroke="black"
    stroke-width="13"
    stroke-linejoin="round"
    stroke-linecap="round" />
  <path
    id="firstScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
    transform="translate(0,0)"
    fill="green"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
  <path
    id="secondScissorHalf"
    class="scissorHalf"
    d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
    transform="translate(0,0)"
    fill="forestgreen"
    stroke="black"
    stroke-width="5"
    stroke-linejoin="round"
    stroke-linecap="round"
    fill-rule="evenodd" />
</svg>

.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 sich die beiden Hälften der Schere in der oberen linken Ecke der Leinwand befinden. Durch die Verwendung von offset-path sind die beiden Scherenhälften jedoch mit dem Startpunkt des SVG-Pfads ausgerichtet und können sich entlang dieses bewegen.

In diesem Beispiel wird veranschaulicht, wie auf eine SVG-Form verwiesen werden kann, um die Form des Pfads zu definieren, dem ein Element folgen kann. Der grüne Kreis (definiert durch .target) folgt dem Pfad eines Rechtecks, das definiert wird, indem die ID der SVG-Form (svgRect) an die offset-path-Eigenschaft mithilfe von url() übergeben wird.

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

<div class="outer">
  <div class="target"></div>
</div>
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect id="svgRect" x="50" y="50" width="200" height="100" />
  </svg>
</div>

.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>
• path()
• Weitere Demos:
  • Beispiele mit verschiedenen Formenwerten auf CodePen von CSS-Tricks
  • Bewegung eines Dreiecks entlang eines gekrümmten Pfads auf CodePen von Eric Willigers
  • Bewegung eines Scherenpaars entlang der Form eines Hauses auf CodePen von Eric Willigers
  • Bewegung mehrerer Augenpaare auf JSFiddle von Eric Willigers