CSS-Eigenschaft offset-anchor

Die Eigenschaft offset-anchor definiert einen Ankerpunkt der Box entlang des Offsetpfades. Der Ankerpunkt gibt den Punkt der Box an, der der Punkt ist, der entlang der Offsetbahn bewegt wird.

Diese Offset-Eigenschaft ist eine experimentelle Technologie.
Anfangswert auto
Gilt für Transformierbare Elemente
Geerbt Nein
Animierbar Ja
Version Motion Path Module Level 1
DOM Syntax object.style.offsetAnchor = "right top";

Syntax

offset-anchor: auto | <position>;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-color: #ccc;
      padding: 0 50px;
      width: 100%;
      }
      svg, .box {
      position: absolute;
      }
      .box {
      animation: move 3s 0ms infinite alternate ease-in-out;
      background: linear-gradient(#8ebf42 50%,#1c87c9 50%);
      height: 50px;
      width: 50px;
      offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307");
      }
      @keyframes move {
      100% {
      offset-distance: 100%;
      }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft offset-anchor</h2>
    <svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
      <path fill="none" stroke="#666" stroke-width="1" d="M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"></path>
    </svg>
    <div class="box"></div>
  </body>
</html>

Werte

Wert Beschreibung
auto Nimmt den Wert von offset-position an, vorausgesetzt, dass "auto" und offset-path auf "none" ist.
<position>

<percentage>- Ein Prozentsatz für den horizontalen Versatz ist relativ zur Breite des Inhaltsbereichs. Ein Prozentsatz für den vertikalen Versatz ist relativ zur Höhe des Inhaltsbereichs.

<length>- Ein Längenwert gibt einen Längenversatz von der linken oberen Ecke des Inhaltsbereichs der Box an.

initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
46.0+ 33.0+

Übe dein Wissen

Was macht die CSS-Eigenschaft 'offset-anchor'?
Finden Sie das nützlich?