From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/path()/index.md | 86 ++++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 48 deletions(-) (limited to 'files/fr/web/css/path()') 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() --- -
{{CSSRef}}
+{{CSSRef}} -

La fonction 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.

+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. -

Syntaxe

+## Syntaxe -
path( [[<'fill-rule'>,]?<string>)
+```css +path( [[<'fill-rule'>,]?) +``` -

Paramètres

+### Paramètres -
-
<'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 pour plus de détails.
-
<string>
-
Doit être une chaîne représentant les données d'un chemin SVG.
-
+- `<'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. +- `` + - : Doit être une [chaîne représentant les données d'un chemin SVG](/fr/docs/Web/SVG/Element/path). -

Exemples

+## Exemples -

Exemples de valeurs correctes pour path()

+### Exemples de valeurs correctes pour path() -
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");
-
- -

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écificationStatut
{{SpecName('CSS Shapes', '#funcdef-path', 'path()')}}{{Spec2('CSS Shapes')}}
- -

Voir aussi

- - +``` + +### 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) +- SVG Path Syntax Illustrated Guide + + [SVG Path Syntax Illustrated Guide (en anglais)](https://css-tricks.com/svg-path-syntax-illustrated-guide/) -- cgit v1.2.3-54-g00ecf