offset-path

Die offset-path Eigenschaft nimmt als Wert einen <offset-path> Wert, einen <coord-box> Wert oder beides oder das Schlüsselwort none. 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 Fehlen einer Offset-Transformation des Elements. Die Bewegung des Elements wird in diesem Fall durch seine Standard-Positionseigenschaften wie top und left bestimmt, statt durch einen Offset-Pfad. Dies ist der Standardwert.

<offset-path>

Eine ray() Funktion, ein <url> Wert oder ein <basic-shape> Wert, der den geometrischen Offset-Pfad angibt. Wenn keine Form angegeben ist, wird die Pfadform für den <coord-box> Wert als inset(0 round X) betrachtet, wobei X der Wert von border-radius des Elements ist, das den Containment-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 <angle>, einen optionalen Größenwert, das optionale Schlüsselwort contain und optional das at <position>.

<url>

Gibt die ID eines SVG-Form-Elements an. Der Pfad entspricht der Form des SVG-Elements <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, oder <rect>, das durch seine id in der url() Funktion referenziert wird. Wenn die URL kein Form-Element referenziert oder anderweitig ungültig ist, ist der aufgelö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 Basis-Form-Funktion an, wie z. B. circle(), ellipse(), inset(), path(), polygon(), rect(), oder xywh(). Beispielsweise, wenn die <basic_shape> ein ellipse() Funktionsaufruf ist, dann ist der Pfad der Umriss der Ellipse, beginnend am äußersten Punkt der Ellipse und im Uhrzeigersinn durch eine volle Rotation. Für ellipse() und circle(), die den Parameter at <position> akzeptieren, wenn die <position> weggelassen wird, wird die Position standardmäßig auf center gesetzt, es sei denn, das Element hat ein spezifiziertes offset-position. In diesem Fall wird der offset-position Wert für den at <position> Parameter verwendet. Komplexere Formen können mit der shape() Funktion definiert werden.

<coord-box>

Gibt die Größeninformationen des Referenzrahmens an, der den Pfad enthält. Der Referenzrahmen wird aus dem Element abgeleitet, das den Containment-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 <basic-shape> verwendet wird, um den Offset-Pfad zu definieren, bietet der <coord-box> Wert den Referenzrahmen für den Strahl oder die <basic-shape>. Wenn <url> verwendet wird, um den Offset-Pfad zu definieren, bietet der <coord-box> Wert das Viewport und Benutzersystem für das Form-Element, wobei der Ursprung (0 0) in der oberen linken Ecke liegt und die Größe 1px beträgt.

Die Eigenschaft offset-path definiert einen Pfad, dem ein animiertes Element folgen kann. Ein Offset-Pfad ist entweder ein spezifischer 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 Drehung des Objekts zur Anfangsposition angibt.

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

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 zeigt 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 der Rand, die Begrenzungslinie und der Abstand absichtlich große Werte gegeben, um die Platzierung der blauen, grünen und roten Rechtecke an ihren jeweiligen <coord-box> Kanten zu veranschaulichen: border-box, padding-box und content-box.

Ergebnis

In diesem Beispiel erzeugt 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 verschiedene Pfadelemente dargestellt. Im CSS-Code wird die Eigenschaft offset-path verwendet, um einen zu verfolgenden Pfad für die beiden Scherenhälften anzugeben. Dieser im CSS definierte Pfad ist identisch mit dem im SVG durch das <path> Element dargestellten, nämlich dem Umriss des Hauses einschließlich des Schornsteins.

<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 die beiden Hälften der Schere standardmäßig in der oberen linken Ecke der Leinwand liegen. Durch die Verwendung von offset-path werden die beiden Scherenhälften jedoch mit dem Startpunkt des SVG-Pfades abgeglichen, wodurch sie sich entlang dieses bewegen können.

Dieses Beispiel zeigt, wie auf eine SVG-Form verwiesen werden kann, 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 die Übergabe der ID der SVG-Form (svgRect) an die offset-path Eigenschaft unter Verwendung von url() definiert wird.

Das SVG-Rechteck, das die Pfadform definiert, wird hier nur visuell gezeigt, um 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 Shape-Werten auf Codepen von CSS-Tricks
  • Ein Dreieck entlang eines gebogenen Pfades bewegen auf Codepen von Eric Willigers
  • Ein Paar Scheren entlang der Form eines Hauses bewegen auf Codepen von Eric Willigers
  • Mehrere Augenpaare bewegen auf JSFiddle von Eric Willigers