CSS-Eigenschaft stroke-dashoffset

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>

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.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Welche der folgenden Aussagen trifft auf die CSS-Eigenschaft 'stroke-dashoffset' zu?
Finden Sie das nützlich?