initial commit

1 files changed, 178 insertions, 0 deletions

diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html
new file mode 100644
index 0000000000..3d6826f621
--- /dev/null
+++ b/files/fr/web/css/offset-path/index.html
@@ -0,0 +1,178 @@
+---
+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 class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<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="blockIndicator 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"><strong>Attention !</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</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>&lt;basic-shape&gt;</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>.</dd>
+ <dd>
+ <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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit est tiré de <a href="http://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>&lt;path&gt;</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">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900"&gt;
+  &lt;title&gt;House and Scissors&lt;/title&gt;
+  &lt;rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" /&gt;
+  &lt;polygon points="506,423 900,190 1294,423"
+           fill="yellow" /&gt;
+  &lt;polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" /&gt;
+  &lt;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" /&gt;
+  &lt;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" /&gt;
+  &lt;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" /&gt;
+&lt;/svg&gt;</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 class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<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>