Propriété CSS stroke-dasharray

❮ Précédent Suivant ❯

La propriété stroke-dasharray prend le contrôle sur le motif de tirets et les espaces utilisés pour former la forme du trait d'un chemin.

La propriété stroke-dasharray a deux valeurs: none et <dasharray>.

<Dasharray> est une liste de mesures de longueur ou pourcentage séparés par des virgules ou des espaces blancs. Chaque valeur spécifie une longueur le long du chemin pour lequel le trait est un tiret ou un écart.

Valeur initiale	none
Appliquée à	Formes et éléments de contenu de texte.
Héritée	Oui.
Animable	Non.
Version	SVG 1.1 Specification
Syntaxe DOM	Object.strokeDasharray = "none";

Syntaxe

stroke-dasharray: none | <dasharray> | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-dasharray</h2>
    <svg height="80" width="300">
      <g fill="none" stroke="black" stroke-width="4">
        <path stroke-dasharray="6,6" d="M5 20 l215 0" />
        <path stroke-dasharray="8,10" d="M5 40 l215 0" />
        <path stroke-dasharray="18,10,6,7,7,10" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Un autre exemple avec la propriété stroke-dasharray:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h2>Exemple de la propriété stroke-dasharray</h2>
    <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c98c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#8ebf42"
        stroke-dasharray="3" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#000"
        stroke-dasharray="5 1" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#ccc"
        stroke-dasharray="4 2 2" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="4 1 3 2" />
    </svg>
  </body>
</html>

Valeurs

Valeurs	Description
none	Aucun tiret n'est utilisé.
<dasharray>	Un motif fringant est utilisé.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.