OUJOOD.COM
La propriété css offset-anchor définition et utilisation
La propriété offset-anchor définit un point à l'intérieur de la boîte à laquelle elle s'applique comme l'ancre qui se déplace le long de la trajectoire défini par offset-path.
C'est un peu long comme définition, mais nous allons le décomposer un peu.
Supposons que vous avez un élément, disons une boîte div comme suit :
<div class="box"></div>Avec le style css suivant:
.box {
background-color: orange;
height: 50px;
width: 50px;
border-radius: 50%;
Et vous voulez que cette boîte se déplace le long d'un chemin, disons une ligne sinueuse. Nous pouvons créer cette ligne avec SVG directement dans le HTML et l'utiliser comme chemin ou trajectoire pour le déplacement de la boîte. Nous créons l'animation en utilisant la propriété offset-distance et nous définissons le chemin ou trajectoire par la propriété offset-path comme le montre l'exemple suivant:
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset-anchor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
svg, .box {
position: absolute;
}
.box {
animation: move 4s 0ms infinite alternate ease-in-out;
background-color: orange;
height: 50px;
width: 50px;
border-radius: 50%;
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>
<h1>La propriété CSS offset-anchor</h1>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#ff0000" 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>
C'est très bien. Mais que faire si nous voulons que la boîte ait l'air d'être suspendue à la ligne ? Vous savez, comme une personne qui glisse le long d'une tyrolienne. ( dans l'exemple ci-dessous c'est la boite de couleur rouge)
C'est là que l'ancrage décalé entre en jeu ! Il marque un point sur l'élément et l'utilise pour positionner l'élément sur le chemin.
Voici un exemple où trois boîtes différentes sont attachées au même chemin à des points d'ancrage différents définis par la propriété css ofset-anchor :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS offset-anchor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{padding-left:50px;}
svg, .box {
position: absolute;
}
.box {
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");
border-radius: 50%;
}
.one {
background-color: orange;
offset-anchor: center center;
animation: move 4s 0ms infinite alternate ease-in-out;
}
.two {
background-color: red;
offset-anchor: left top;
animation: move 6s 0ms infinite alternate ease-in-out;
}
.three {
background-color: blue;
offset-anchor: right bottom;
animation: move 6s 0ms infinite alternate ease-in-out;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<h1>La propriété CSS offset-anchor</h1>
<svg class="track" viewBox="0 0 451 379" width="451px" height="379px">
<path fill="none" stroke="#ff0000" 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 one"></div>
<div class="box two"></div>
<div class="box three"></div>
<p><mark>Note : jusqu'au moment de l'écriture de cet article cette propriété ne fonctionne qu'avec le navigateur Firefox.</mark></p>
</body>
</html>
La Syntaxe CSS de la propriété css offset-anchor
offset-anchor: auto|valeur
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.offsetAnchor="bottom right" |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | non supporté | non supporté | 72.0 | non supporté | non supporté |
Valeurs de la propriété css
| Valeur | Description |
|---|---|
| auto | Valeur par défaut. Le point d'ancrage sera au centre de l'élément, comme la valeur de la propriété "50% 50%". |
| Si vous ne spécifiez qu'un seul mot-clé, l'autre valeur sera "center" |
| xpos ypos | La première valeur correspond à la position horizontale et la seconde à la position verticale. Le coin supérieur gauche est 0 0. Les unités peuvent être des pixels (0px 0px) ou toute autre unité CSS. Si vous ne spécifiez qu'une seule valeur, l'autre valeur sera de 50 %. Vous pouvez mélanger les % et les positions |
| x% y% | La première valeur est la position horizontale et la seconde la position verticale. Le coin supérieur gauche est à 0 % 0 %. Le coin inférieur droit est égal à 100 % 100 %. Si vous ne spécifiez qu'une seule valeur, l'autre valeur sera de 50 %. La valeur par défaut est : 50% 50% |
Regarder aussi notre tutoriel sur le SVG :
Les chemin pour déssiner en SVG partie 1