stroke-dasharray

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'attribut stroke-dasharray est un attribut de présentation qui définit le motif des traits et des espaces utilisés pour dessiner le contour de la forme.

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

Cet attribut peut être utilisé avec les éléments SVG suivants :

Exemple

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

html

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <!-- Pas de tirets ou d'espaces -->
  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />

  <!-- Traits et espaces de même taille -->
  <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" />

  <!-- Traits et espaces de tailles différentes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" />

  <!-- Traits et espaces de tailles différentes avec un nombre impair de valeurs -->
  <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" />

  <!-- Traits et espaces de tailles différentes avec un nombre pair de valeurs -->
  <line
    x1="0"
    y1="9"
    x2="30"
    y2="9"
    stroke="black"
    stroke-dasharray="4 1 2 3" />

  <!-- Traits commençant par un espace -->
  <line
    x1="0"
    y1="11"
    x2="30"
    y2="11"
    stroke="black"
    stroke-dasharray="0 4 0" />
</svg>

Notes d'utilisation

Valeur	`none` \| `<dasharray>`
Valeur par défaut	`none`
Peut être animé	Oui

<dasharray>

Une liste de valeurs <length> et <percentage>, séparées par des espaces ou des virgules, qui indiquent les longueurs alternées des traits et des espaces.

Si un nombre impair de valeurs est fourni, la liste est répétée afin d'obtenir un nombre pair de valeur. Ainsi, 5,3,2 sera équivalent à 5,3,2,5,3,2.

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # StrokeDashing

Compatibilité des navigateurs

BCD tables only load in the browser