Fonction CSS path() - CSS | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Fonction CSS path()

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La fonction CSS path() accepte une chaîne de caractères représentant un tracé SVG et permet de dessiner une forme dans les modules formes CSS et chemin de déplacement CSS. La fonction path() est une valeur du type de donnée <basic-shape>. Elle peut être utilisée dans les propriétés CSS offset-path et clip-path, ainsi que dans l'attribut SVG d.

Il existe certaines limitations à l'utilisation de la fonction path(). Le tracé doit être défini comme une seule chaîne de caractères, il n'est donc pas possible de créer un tracé personnalisé à l'aide de variables (fonctions var()). De plus, toutes les longueurs du tracé sont implicitement définies en pixels (px) ; aucune autre unité n'est acceptée. La fonction shape() offre plus de flexibilité que la fonction path().

Dans cet article

Exemple interactif

clip-path: path(
  "M  20  240 \
 L  20  80 L 160  80 \
 L 160  20 L 280 100 \
 L 160 180 L 160 120 \
 L  60 120 L  60 240 Z"
);

clip-path: path(
  "M 20 240 \
 C 20 0 300 0 300 240 Z"
);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntaxe

css
path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

/* Utilisé uniquement avec clip-path */
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80")

Paramètres

<fill-rule> Facultatif

Définit quelles parties du tracé sont à l'intérieur de la forme. Les valeurs possibles sont :

nonzero : Un point est considéré comme étant à l'intérieur de la forme si un rayon tracé depuis ce point croise plus de segments du tracé de gauche à droite que de droite à gauche, ce qui donne un compte non nul. C'est la valeur par défaut si <fill-rule> est omis.
evenodd : Un point est considéré comme étant à l'intérieur de la forme si un rayon tracé depuis ce point croise un nombre impair de segments du tracé. Cela signifie que chaque fois que le rayon entre dans la forme, il n'en est pas sorti un nombre égal de fois, indiquant un nombre impair d'entrées sans sorties correspondantes.

Attention : <fill-rule> n'est pas pris en charge dans offset-path et son utilisation invalide la propriété.

Une chaîne de caractères de données, placée entre guillemets, qui définit un tracé SVG. La chaîne de caractères de données du tracé SVG contient des commandes de tracé qui utilisent implicitement l'unité pixel. Un tracé vide est considéré comme invalide.

Valeur de retour

Retourne une valeur <basic-shape>.

Syntaxe formelle

<path()> =
path( <'fill-rule'>? , <string> )

<fill-rule> =
nonzero |
evenodd
Cette syntaxe reflète le dernier standard selon CSS Fill and Stroke Module Level 3, CSS Shapes Module Level 1. Tous les navigateurs n'ont peut-être pas implémenté toutes les parties. Voir la Compatibilité des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Utiliser la fonction path() comme valeur de offset-path

Une fonction path() est utilisée comme valeur de offset-path dans l'exemple suivant pour créer un chemin elliptique le long duquel une balle se déplace.

html
<div id="path">
  <div id="ball"></div>
</div>
<button>animer</button>

css
#path {
  margin: 40px;
  width: 400px;
  height: 200px;

  /* dessine la rampe grise */
  background: radial-gradient(at 50% 0%, transparent 70%, grey 70%, grey 100%);
}

#ball {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;

  /* marque le chemin elliptique */
  offset-path: path("M 15 15 A 6 5.5 10 0 0 385 15");
}

js
const btn = document.querySelector("button");
const ball = document.getElementById("ball");

btn.addEventListener("click", () => {
  btn.setAttribute("disabled", true);
  setTimeout(() => btn.removeAttribute("disabled"), 6000);

  ball.animate(
    // anime la distance sur le chemin
    { offsetDistance: [0, "100%"] },
    {
      duration: 1500,
      iterations: 4,
      easing: "cubic-bezier(.667,0.01,.333,.99)",
      direction: "alternate",
    },
  );
});

Modifier la valeur de l'attribut d du tracé SVG

La fonction path() peut être utilisée pour modifier la valeur de l'attribut d d'un tracé SVG, qui peut aussi être défini à none dans votre CSS.

Le symbole « V » se retourne verticalement au survol, si d est pris en charge comme propriété CSS.

CSS

css
html,
body,
svg {
  height: 100%;
}

/* Ce tracé s'affiche au survol */
#svg_css_ex1:hover path {
  d: path("M20,80 L50,20 L80,80");
}

HTML

html
<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="red" d="M20,20 L50,80 L80,20" />
</svg>

La propriété shape-outside
Le module des formes CSS
Présentation des formes CSS
Guide illustré de la syntaxe du tracé SVG (angl.) sur CSS-tricks (2021)

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 13 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu