CSS-Eigenschaft stroke-dashoffset

❮ Vorige Nächste ❯

Die Eigenschaft stroke-dashoffset ist ein Präsentationsattribut, das die Position entlang eines SVG Pfades definiert, an der der Bindestrich einer Kontur beginnt.

Die Einheite "px" oder "em" sind nicht erforderlich.

Anfangswert	0
Gilt für	Formen und Textinhaltselemente
Geerbt	Ja
Animierbar	Nein
Version	SVG 1.1 Specification
DOM Syntax	Object.strokeDashoffset = "5";

Syntax

stroke-dashoffset: length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-dashoffset</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
length	Definiert die Länge der Eigenschaft. Die Einheiten "px" oder "em" sind nicht erforderlich.
percentage	Die Eigenschaft wird prozentual angegeben.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.