Propriété CSS stroke-dasharray

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.

Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées