Propriété CSS offset-anchor

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.