Propriété CSS path-length

Syntaxe

/* Valeurs avec un mot-clé */
path-length: none;

/* Valeurs de type <length> */
path-length: 0;
path-length: 70;
path-length: 500;

/* Valeurs globales */
path-length: inherit;
path-length: initial;
path-length: revert;
path-length: revert-layer;
path-length: unset;

Valeurs

none

Aucune longueur de chemin n'est définie par l'auteur·ice ; la longueur de chemin calculée par l'agent utilisateur est utilisée pour tous les calculs liés au chemin.

<length>

Une valeur positive ou nulle, sans unité, représentant une longueur de chemin totale définie par l'auteur·ice, en unités utilisateur·ice.

Définition formelle

Syntaxe formelle

path-length = 
  none                |
  <length> [ 0 , ∞ ]  

Exemples

Utilisation simple

Cet exemple définit un chemin et montre comment appliquer une longueur de chemin à celui-ci en utilisant la propriété CSS path-length.

SVG

Notre SVG définit un seul élément SVG <path> courbé avec un trait (stroke) coloré. Il inclut un attribut stroke-dasharray qui définit un motif de tirets réguliers pour le trait.

<svg viewBox="0 0 600 200">
  <path
    d="M 30 100 C 150 20, 250 180, 380 100 S 520 20, 570 100"
    fill="none"
    stroke="#D85A30"
    stroke-width="4"
    stroke-dasharray="24 24"></path>
</svg>

CSS

On définit une valeur path-length sur le <path> :

path {
  path-length: 500;
}

Résultat

Le fait de définir une grande valeur pour path-length entraîne des tirets plus petits et plus fréquents.

Animer une path-length

Un des principaux avantages de rendre path-length disponible en tant que propriété CSS est que vous pouvez lui appliquer des fonctionnalités CSS standard telles que les animations et les transitions. Cet exemple s'appuie sur le précédent, montrant comment animer un path-length avec une animation CSS.

HTML et SVG

Cet exemple inclut le même <path> SVG que le précédent. De plus, il inclut un élément HTML <input type="range"> qui peut être utilisé pour modifier la valeur de path-length appliquée au chemin (<path>) à l'exécution. Nous incluons également un élément HTML <output> pour afficher la valeur actuelle du curseur.

<div>
  <label for="path-slider">Ajustez path-length</label>
  <input type="range" id="path-slider" min="0" max="800" value="200" />
  <output>200</output>
</div>

CSS

Sur l'élément :root, nous définissons une propriété personnalisée CSS appelée --longueur-chemin et lui donnons une valeur initiale de 200. Nous définissons ensuite la valeur de path-length de l'élément <path> sur la propriété --longueur-chemin, et lui appliquons une animation qui s'exécute un nombre infini de fois et alterne entre l'avant et l'arrière.

:root {
  --longueur-chemin: 200;
}

path {
  path-length: var(--longueur-chemin);
  animation: anim-longueur-chemin 2s alternate infinite ease-in-out;
}

div {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}

Ensuite, nous définissons le bloc @keyframes pour l'animation — il anime la propriété path-length entre la valeur --longueur-chemin et la valeur --longueur-chemin multipliée par 1.5.

@keyframes anim-longueur-chemin {
  from {
    path-length: var(--longueur-chemin);
  }

  to {
    path-length: calc(var(--longueur-chemin) * 1.5);
  }
}

JavaScript

Nous commençons notre script en récupérant les références aux éléments <input type="range">, <output> et :root.

const slider = document.querySelector("input");
const output = document.querySelector("output");
const rootElem = document.querySelector(":root");

Ensuite, nous ajoutons un gestionnaire d'évènements input au curseur de plage afin que, lorsque sa valeur est modifiée, le textContent de l'élément <output> et la valeur de la propriété personnalisée --longueur-chemin soient définis pour être égaux à la nouvelle valeur du curseur.

slider.addEventListener("input", () => {
  output.textContent = slider.value;
  rootElem.style.setProperty("--longueur-chemin", slider.value);
});

Résultats

Ajustez le curseur et notez comment des valeurs plus grandes entraînent une taille de tiret plus petite.

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attribut SVG pathLength