stroke-dashoffset

L'attribut stroke-dashoffset décale la position de départ des pointillés sur les lignes SVG.

Note : stroke-dashoffset étant un attribut de présentation, il peut être utilisé comme propriété CSS.

Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath> (en-US), <tref> (en-US), and <tspan>

Exemple

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

html

<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Pas de tiret -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Pas de décalage -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" />

  <!--
  Le début des tirets est décalé
  de 3 unités vers la gauche
  -->
  <line
    x1="0"
    y1="5"
    x2="30"
    y2="5"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="3" />

  <!--
  Le début des tirets est décalé
  de 3 unités vers la droite (-3)
  -->
  <line
    x1="0"
    y1="7"
    x2="30"
    y2="7"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="-3" />

  <!--
  Le début des tirets est décalé
  de 1 unité vers la gauche
  ce qui affiche la même chose que l'exemple précédent
  -->
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="3 1"
    stroke-dashoffset="1" />

  <!--
  Lignes rouges pour indiquer la position
  de départ des tirets
  -->
  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
</svg>

Notes d'usage

Valeur	<percentage> \| <length>
Valeur par défaut	`0`
Animation	Oui

Le décalage est généralement exprimé en unités résolues par pathLength (en-US) mais si un <percentage> est utilisé, alors la valeur est résolue en pourcentage du viewport.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # StrokeDashoffsetProperty

Compatibilité des navigateurs

BCD tables only load in the browser