Propriété CSS offset-anchor

La propriété offset-anchor définit un point d'ancrage de la boîte le long du chemin de décalage. Le point d'ancrage spécifie le point de la boîte qui est la point déplacé le long du chemin de décalage.

Cette propriété offset est une technologie expérimentale.
Valeur initiale auto
Appliquée à Éléments transformables.
Héritée Non.
Animable Oui.
Version Motion Path Module Level 1
Syntaxe DOM object.style.offsetAnchor = "right top";

Syntaxe

offset-anchor: auto | <position>;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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");
      }
      @keyframes move {
      100% {
      offset-distance: 100%;
      }
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété 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>

Valeurs

Valeur Description
auto Prend la valeur de offset-position fourni que la position de décalage n'est pas "auto" et offset-path est "none".
<position>

<percentage>- Percentage pour le décalage horizontal est relatif à la largeur de la zone du contenu. Percentage pour le décalage vertical est relatif à la hauteur de la zone du contenu.

<length>- Une valeur length donne un décalage de longueur du coin supérieur gauche de la zone du contenu de la boîte.

initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

46.0+ 33.0+


Trouvez-vous cela utile?

Articles Associées