Propriété CSS offset-anchor

La propriété offset-anchor définit le point d'ancrage d'une boîte le long du chemin de décalage. Un chemin de décalage est considéré comme étant soit la géométrie d'une forme de base non stylisée, soit un chemin composé d'un ou plusieurs sous-chemins. Le point d'ancrage spécifie le point de la boîte qui est déplacé le long du chemin de décalage.

WARNING

Cette propriété de décalage est une technologie expérimentale.

Valeur initiale	auto
S'applique à	Éléments transformables.
Héritée	Non.
Animable	Oui.
Version	Module de trajectoire de mouvement Niveau 1
Syntaxe DOM	object.style.offsetAnchor = "right top";

Syntaxe

Syntaxe CSS de offset-anchor

css

offset-anchor: auto | <position>;

Exemple de la propriété offset-anchor :

Exemple de code CSS offset-anchor

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 »

Valeurs

Valeur	Description
`auto`	Le centre de la boîte.
`<position>`	`<pourcentage>` - Un pourcentage pour le décalage horizontal est relatif à la largeur de la boîte de remplissage. Un pourcentage pour le décalage vertical est relatif à la hauteur de la boîte de remplissage. `<longueur>` - Une valeur de longueur donne un décalage de longueur à partir du coin supérieur gauche de la boîte de remplissage d'une boîte.
`initial`	Définit la valeur par défaut de la propriété.
`inherit`	Hérite la propriété de son élément parent.

Pratique

Quelle est la fonctionnalité de la propriété offset-anchor en CSS selon l'article w3docs.com ?

Elle détermine l'élément dans lequel le défilement doit avoir lieuElle définit l'origine pour les décalages de position, décrits par les propriétés de décalage, pour un élément de positionElle change la couleur de fond d'un élémentElle permet de définir un élément en position relative par rapport à un autre élément

Propriété CSS offset-anchor ​

Syntaxe ​

Exemple de la propriété offset-anchor : ​

Valeurs ​

Pratique ​

Propriété CSS offset-anchor

Syntaxe

Exemple de la propriété offset-anchor :

Valeurs

Pratique