CSS offset-anchor-Eigenschaft

Die offset-anchor-Eigenschaft definiert den Ankerpunkt einer Box entlang des Offset-Pfads. Ein Offset-Pfad wird entweder als Geometrie einer ungestylten Grundform oder als Pfad betrachtet, der aus einem oder mehreren Teilpfaden besteht. Der Ankerpunkt gibt den Punkt der Box an, der entlang des Offset-Pfads verschoben wird.

WARNING

Diese Offset-Eigenschaft ist eine experimentelle Technologie.

Anfangswert	auto
Gilt für	Transformierbare Elemente.
Vererbt	Nein.
Animierbar	Ja.
Version	Motion Path Module Level 1
DOM-Syntax	object.style.offsetAnchor = "right top";

Syntax

CSS offset-anchor-Syntax

css

offset-anchor: auto | <position>;

Beispiel zur offset-anchor-Eigenschaft:

CSS offset-anchor-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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");
        offset-anchor: center;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h2>Offset-anchor property example</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>

Try it Yourself »

Werte

Wert	Beschreibung
`auto`	Die Mitte der Box.
`<position>`	`<percentage>` - Ein Prozentsatz für den horizontalen Offset bezieht sich auf die Breite der Padding-Box. Ein Prozentsatz für den vertikalen Offset bezieht sich auf die Höhe der Padding-Box. `<length>` - Ein Längenwert gibt einen Längenoffset von der oberen linken Ecke der Padding-Box einer Box an.
`initial`	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
`inherit`	Erbt die Eigenschaft von ihrem übergeordneten Element.

Practice

Welche Funktionalität hat die offset-anchor-Eigenschaft in CSS laut dem w3docs.com-Artikel?

Sie bestimmt das Element, in dem das Scrollen stattfinden sollSie legt den Ursprung für die Positionsverschiebungen fest, die durch die offset-Eigenschaften beschrieben werden, für ein positioniertes ElementSie ändert die Hintergrundfarbe eines ElementsSie ermöglicht es, ein Element relativ zu einem anderen Element zu positionieren

CSS offset-anchor-Eigenschaft ​

Syntax ​

Beispiel zur offset-anchor-Eigenschaft: ​

Werte ​

Practice ​

CSS offset-anchor-Eigenschaft

Syntax

Beispiel zur offset-anchor-Eigenschaft:

Werte

Practice