W3docs
fr
Se connecter

Propriété CSS stroke-dashoffset

Comment utiliser la propriété CSS stroke-dashoffset pour définir le point de départ du motif de tirets d'un trait SVG, avec des exemples de valeurs.

La propriété stroke-dashoffset définit la distance le long d'un chemin SVG à partir de laquelle commence le motif de tirets d'un trait. Elle fonctionne de concert avec stroke-dasharray, qui fixe la longueur des tirets et des espaces. stroke-dasharray détermine l'aspect du motif ; stroke-dashoffset détermine à quel endroit du chemin ce motif commence.

Cette page explique comment le décalage déplace le motif de tirets, pourquoi son animation produit l'effet populaire de « ligne qui se dessine elle-même », et les valeurs qu'elle accepte.

stroke-dashoffset peut être défini de deux façons : comme attribut de présentation sur l'élément SVG (stroke-dashoffset="5") ou comme propriété CSS (stroke-dashoffset: 5;). Lorsque les deux sont présents, la règle CSS prend le dessus sur l'attribut de présentation, et une déclaration style en ligne l'emporte sur les deux.

Fonctionnement du décalage

Imaginez le motif de tirets comme une règle posée le long du chemin. stroke-dashoffset fait glisser cette règle vers l'avant ou vers l'arrière avant que le chemin ne soit tracé :

  • Une valeur positive décale le motif vers l'arrière le long du chemin (le tiret qui se trouvait juste avant le début entre dans le champ de vision).
  • Une valeur négative décale le motif vers l'avant.
  • Le décalage effectue un retour à zéro sur la longueur totale d'un cycle tiret-espace, de sorte qu'un décalage égal à la longueur du cycle est identique à 0.

Étant donné que la valeur est simplement une distance, les unités (px, em) sont facultatives dans l'espace utilisateur SVG — un nombre nu est interprété en unités utilisateur.

Info

La propriété stroke-dashoffset peut être utilisée à la fois comme propriété CSS et comme attribut de présentation. Elle peut être appliquée à n'importe quel élément, mais n'a d'effet que sur les éléments suivants : <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> et <tspan>.

Info

Les unités « Px » ou « em » ne sont pas obligatoires.

Valeur initiale0
S'applique àLes formes et les éléments de contenu textuel.
HéritéeOui.
AnimableOui.
VersionSVG 1.1 Specification
Syntaxe DOMObject.strokeDashoffset = 5;

Syntaxe

Syntaxe CSS de stroke-dashoffset

stroke-dashoffset: length | percentage | initial | inherit;

Exemple de la propriété stroke-dashoffset :

La valeur stroke-dashoffset déplace le point de départ du motif de tirets le long du chemin.

Exemple de code CSS stroke-dashoffset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dashoffset property example</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>
Essayez vous-même »

Résultat

Liste des valeurs CSS stroke-dashoffset

Chaque ligne ci-dessus utilise le même stroke-dasharray mais un décalage différent, de sorte que les tirets s'alignent à des points de départ différents. L'élément <path> de petits repères indique exactement l'endroit où commence chaque motif.

L'animation « ligne qui se dessine elle-même »

La raison la plus courante d'utiliser stroke-dashoffset est d'animer un SVG pour qu'il semble se dessiner lui-même. L'astuce consiste à définir le tableau de tirets et le décalage à la longueur totale du chemin : cela fait du trait entier un seul grand espace (invisible). Animer le décalage jusqu'à 0 fait glisser le tiret unique dans le champ de vision, dessinant la ligne du début à la fin.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .draw {
        fill: none;
        stroke: #1c87c9;
        stroke-width: 4;
        /* One dash and one gap, each as long as the path */
        stroke-dasharray: 300;
        stroke-dashoffset: 300;
        animation: draw 2s ease forwards;
      }
      @keyframes draw {
        to {
          stroke-dashoffset: 0;
        }
      }
    </style>
  </head>
  <body>
    <h2>Self-drawing line</h2>
    <svg viewBox="0 0 110 110" width="160">
      <path class="draw" d="M5,55 C5,5 105,5 105,55 S5,105 5,55" />
    </svg>
  </body>
</html>

Pour obtenir ce résultat précis pour n'importe quelle forme, lisez la longueur du chemin en JavaScript avec path.getTotalLength() et utilisez-la à la fois pour stroke-dasharray et pour le stroke-dashoffset initial.

Pièges courants

  • Le motif ne bouge pas du tout. stroke-dashoffset n'a d'effet que lorsqu'un stroke-dasharray est également défini. Sans tirets, il n'y a rien à décaler.
  • Aucun trait visible. L'élément a besoin d'une couleur stroke et d'un stroke-width non nul ; le décalage n'a aucun effet sur un trait invisible.
  • L'animation ne se dessine qu'à moitié. Assurez-vous que stroke-dasharray et le stroke-dashoffset initial sont au moins aussi longs que getTotalLength() ; s'ils sont plus courts, l'espace est trop petit pour masquer l'intégralité du chemin.

Valeurs

ValeurDescription
lengthDéfinit la longueur de la propriété. Les unités « Px » ou « em » ne sont pas obligatoires.
percentageLa propriété est spécifiée en pourcentage.
initialApplique la valeur par défaut à la propriété.
inheritHérite la propriété de son élément parent.

Pratique

Pratique
Quel est le rôle de la propriété CSS stroke-dashoffset et comment l'utilise-t-on ?
Quel est le rôle de la propriété CSS stroke-dashoffset et comment l'utilise-t-on ?
Was this page helpful?