1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
---
title: offset-anchor
slug: Web/CSS/offset-anchor
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/offset-anchor
---
<div>{{cssref}}{{seecompattable}}</div>
<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css">/* Valeurs avec un movalues */
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;
/* Valeurs de pourcentages */
/* Type <percentage> */
offset-anchor: 25% 75%;
/* Valeurs de longueur */
/* Type <length> */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;
/* Valeurs de décalage relatives à un bord */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;
/* Valeurs globales */
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: unset;</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
<dt><code><position></code></dt>
<dd>Une position ({{cssxref("<position>")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("<position>")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code><position></code>, excepté pour <code>background(-position)</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code><div></code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
<p>Chaque élément <code><section></code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code><div></code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><section>
<</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">>
</section>
<section>
</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">>
</section>
<section>
</span><span class="tag token"><span class="punctuation token"> <</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">></span><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code>
</section>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
offset-path: path('M 0,20 L 200,20');
animation: move 3000ms infinite alternate ease-in-out;
width: 40px;
height: 40px;
}
section {
background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
border: 1px solid #ccc;
margin-bottom: 10px;
}
.offset-anchor1 {
offset-anchor: auto;
background: cyan;
}
.offset-anchor2 {
offset-anchor: right top;
background: purple;
}
.offset-anchor3 {
offset-anchor: left bottom;
background: magenta;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Spécification</th>
<th>État</th>
<th>Commentaires</th>
</tr>
<tr>
<td>{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}</td>
<td>{{Spec2('Motion Path Level 1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.properties.offset-anchor")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("offset")}}</li>
<li>{{cssxref("offset-distance")}}</li>
<li>{{cssxref("offset-rotation")}}</li>
<li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code><path></code></a></li>
</ul>
|
