CSS-Eigenschaft stroke-dasharray

Die Eigenschaft stroke-dasharray steuert das Muster aus Strichen und Lücken, das zur Form des Strichs eines Pfads verwendet wird.

Die Eigenschaft stroke-dasharray hat zwei Werte: none und <dasharray>.

Ein <dasharray> ist eine Liste von durch Kommas und/oder Leerzeichen getrennten Längen oder Prozentsätzen. Jeder Wert gibt eine Länge entlang des Pfads an, für die der Strich entweder ein Strich oder eine Lücke ist.

CSS-Inline-Styles überschreiben SVG-Präsentationsattribute. Ein Inline-Style stroke-dasharray: 4; hat beispielsweise Vorrang vor dem Präsentationsattribut stroke-dasharray="4".

INFO

Die Eigenschaft stroke-dasharray kann sowohl als CSS-Eigenschaft als auch als SVG-Präsentationsattribut verwendet werden. Sie kann auf jedes Element angewendet werden, wirkt sich jedoch nur auf die folgenden Elemente aus: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <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	No dash is used.
`<dasharray>`	A dashing pattern is used.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

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.

CSS-Eigenschaft stroke-dasharray ​

Syntax ​

Example of the stroke-dasharray property: ​

Result ​

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

Values ​