w3docs logo

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
✓ ✓ ✓ ✓ ✓
❮ Vorige Nächste ❯
Finden Sie das nützlich?