Propriété CSS stroke-dasharray

La propriété stroke-dasharray contrôle le motif des tirets et des espaces utilisé pour former le tracé d’un chemin.

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

Un <dasharray> est une liste de longueurs ou de pourcentages séparés par des virgules et/ou des espaces. Chaque valeur spécifie une longueur le long du chemin pour laquelle le trait est un tiret ou un espace.

Les styles en ligne CSS remplacent les attributs de présentation SVG. Par exemple, un style en ligne stroke-dasharray: 4; aura priorité sur un attribut de présentation stroke-dasharray="4".

INFO

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

Initial Value	none
Applies to	Shapes and text content elements.
Inherited	Yes.
Animatable	No.
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeDasharray = "none";

Syntax

CSS stroke-dasharray syntax

css

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

Example of the stroke-dasharray property:

CSS stroke-dasharray code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</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>

Try it Yourself »

Result

CSS stroke-dasharray

Example of the stroke-dasharray property with the `<line>` element:

CSS stroke-dasharray another code example

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dasharray property example</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>

Try it Yourself »

Values

Value	Description
none	Aucun tiret n’est utilisé.
`<dasharray>`	Un motif de tirets est utilisé.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de l’élément parent.

Practice

What is the function of the 'stroke-dasharray' property in CSS?

It sets the pattern of dashes and gaps used to stroke paths.It colors the stroke paths.It specifies the width of the stroke path.It modifies the dash sequence pattern by repeating the values.It creates animation effects for stroke paths.

Propriété CSS stroke-dasharray ​

Syntax ​

Example of the stroke-dasharray property: ​

Result ​

Example of the stroke-dasharray property with the <line> element: ​

Values ​