diff options
Diffstat (limited to 'files/fr/web/css/offset-path/index.md')
| -rw-r--r-- | files/fr/web/css/offset-path/index.md | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/files/fr/web/css/offset-path/index.md b/files/fr/web/css/offset-path/index.md new file mode 100644 index 0000000000..3a3b342f15 --- /dev/null +++ b/files/fr/web/css/offset-path/index.md @@ -0,0 +1,175 @@ +--- +title: offset-path +slug: Web/CSS/offset-path +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/offset-path +--- +<div>{{SeeCompatTable}}{{CSSRef}}</div> + +<p>La propriété <code><strong>offset</strong></code><strong><code>-path</code></strong> définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.</p> + +<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div> + +<p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p> + +<p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p> + +<div class="note"> +<p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur par défaut */ +offset-path: none; + +/* Valeurs avec une notation fonctionnelle */ +offset-path: ray(45deg closest-side contain); + +/* URL */ +offset-path: url(#path); + +/* Formes */ +offset-path: circle(50% at 25% 25%); +offset-path: inset(50% 50% 50% 50%); +offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); +offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200'); + +/* Boîtes géométriques */ +offset-path: margin-box; +offset-path: stroke-box; + +/* Valeurs globales */ +offset-path: inherit; +offset-path: initial; +offset-path: unset; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<div class="warning"> + <p><strong>Attention :</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</p> +</div> + +<dl> + <dt><code>ray()</code></dt> + <dd>Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre <code>closest-side</code> et <code>farthest-corner</code> avec le mot-clé <code>contain</code>.</dd> + <dt><code>url()</code></dt> + <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd> + <dt><code><basic-shape></code></dt> + <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>. + <dl> + <dt><code>path()</code></dt> + <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd> + </dl> + </dd> + <dt><code>none</code></dt> + <dd>Aucun chemin de mouvement n'est indiqué.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<p>L'exemple qui suit est tiré de <a href="https://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code><path></code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.scissorHalf { + offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190'); + animation: followpath 4s linear infinite; +} + +@keyframes followpath { + to { + motion-offset: 100%; + offset-distance: 100%; + } +}</pre> + +<h3 id="SVG">SVG</h3> + +<p>Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec <code>offset-path</code>.</p> + +<pre class="brush: html"><svg xmlns="http://www.w3.org/2000/svg" + width="700" + height="450" + viewBox="350 0 1400 900"> + <title>House and Scissors</title> + <rect x="595" + y="423" + width="610" + height="377" + fill="blue" /> + <polygon points="506,423 900,190 1294,423" + fill="yellow" /> + <polygon points="993,245 993,190 1086,190 1086,300" + fill="red" /> + <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" + fill="none" + stroke="black" + stroke-width="13" + stroke-linejoin="round" + stroke-linecap="round" /> + <path id="firstScissorHalf" class="scissorHalf" + d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0" + transform="translate(0,0)" + fill="green" + stroke="black" + stroke-width="5" + stroke-linejoin="round" + stroke-linecap="round" + fill-rule="evenodd" /> + <path id="secondScissorHalf" class="scissorHalf" + d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0" + transform="translate(0,0)" + fill="forestgreen" + stroke="black" + stroke-width="5" + stroke-linejoin="round" + stroke-linecap="round" + fill-rule="evenodd" /> +</svg></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '100%', '450')}}</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-path-property', 'offset-path')}}</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> + +<p>{{Compat("css.properties.offset-path")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("offset")}}</li> + <li>{{cssxref("offset-distance")}}</li> + <li>{{cssxref("offset-rotation")}}</li> + <li>{{cssxref("offset-anchor")}}</li> + <li>{{cssxref("offset-position")}}</li> + <li>{{SVGElement("path")}}</li> +</ul> |