diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/path() | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/path()')
-rw-r--r-- | files/fr/web/css/path()/index.md | 86 |
1 files changed, 38 insertions, 48 deletions
diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md index 7be4d1a072..cfc0fcd2c1 100644 --- a/files/fr/web/css/path()/index.md +++ b/files/fr/web/css/path()/index.md @@ -1,61 +1,51 @@ --- title: path() slug: Web/CSS/path() -translation_of: 'Web/CSS/path()' +translation_of: Web/CSS/path() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/CSS_Functions">fonction</a> <a href="/fr/docs/Web/CSS">CSS</a> <code><strong>path()</strong></code> accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme.</p> +La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()`** accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme. -<h2 id="syntax">Syntaxe</h2> +## Syntaxe -<pre class="brush: css">path( [[<'fill-rule'>,]?<string>)</pre> +```css +path( [[<'fill-rule'>,]?<string>) +``` -<h3 id="parameters">Paramètres</h3> +### Paramètres -<dl> - <dt><code><'fill-rule'></code></dt> - <dd>La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont <code>nonzero</code> ou <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>. Voir <a href="/fr/docs/Web/SVG/Attribute/fill-rule">fill-rule</a> pour plus de détails.</dd> - <dt><code><string></code></dt> - <dd>Doit être une <a href="/fr/docs/Web/SVG/Element/path">chaîne représentant les données d'un chemin SVG</a>.</dd> -</dl> +- `<'fill-rule'>` + - : La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont `nonzero` ou `evenodd`. La valeur par défaut est `nonzero`. Voir [fill-rule](/fr/docs/Web/SVG/Attribute/fill-rule) pour plus de détails. +- `<string>` + - : Doit être une [chaîne représentant les données d'un chemin SVG](/fr/docs/Web/SVG/Element/path). -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="examples_of_correct_values_for_path">Exemples de valeurs correctes pour path()</h3> +### Exemples de valeurs correctes pour path() -<pre class="brush: css">path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +```css +path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); -</pre> - -<h3 id="use_in_offset_path">Utilisation en tant que valeur de offset-path</h3> - -<p>La fonction <code>path()</code> est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation.</p> - -<p>{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}}</p> - -<h2 id="specifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Shapes', '#funcdef-path', 'path()')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - </tr> - </tbody> -</table> - -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li>{{cssxref("<shape-outside>")}}</li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Formes CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Vue d'ensemble des formes CSS</a></li> - <li><a href="https://css-tricks.com/svg-path-syntax-illustrated-guide/"><i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)</a></li> -</ul> +``` + +### Utilisation en tant que valeur de offset-path + +La fonction `path()` est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation. + +{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}} + +## Spécifications + +| Spécification | Statut | +| ------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('CSS Shapes', '#funcdef-path', 'path()')}} | {{Spec2('CSS Shapes')}} | + +## Voir aussi + +- {{cssxref("<shape-outside>")}} +- [Formes CSS](/fr/docs/Web/CSS/CSS_Shapes) +- [Vue d'ensemble des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- <i lang="en">SVG Path Syntax Illustrated Guide</i> + + [<i lang="en">SVG Path Syntax Illustrated Guide</i> (en anglais)](https://css-tricks.com/svg-path-syntax-illustrated-guide/) |