stroke-dashoffset

Die CSS-Eigenschaft stroke-dashoffset definiert die Position entlang eines SVG-Pfades, an der der Strich eines stroke beginnen soll. Je höher die Zahl, desto weiter beginnt der Strich entlang des Pfades.

.module {
  stroke-dashoffset: 100;
}

Denken Sie daran

• Dies wird ein Präsentationsattribut überschreiben <path stroke-dashoffset="100" ... />
• Dies wird nicht einen Inline-Stil überschreiben, z.B. <path style="stroke-dashoffset: 100;" ... />

Werte

Die Eigenschaft stroke-dashoffset kann einen prozentualen oder numerischen Wert akzeptieren.

• stroke-dashoffset: 100
• stroke-dashoffset: 25%

Beachten Sie, dass Einheiten (d.h. em und px) nicht erforderlich sind. Eine Zahl ohne Einheiten wird in Pixeln gerendert. Prozent ist relativ zum Prozentsatz des aktuellen Viewports.

Siehe den Pen stroke-dashoffset Eigenschaft von CSS-Tricks (@css-tricks) auf CodePen.

Mit stroke-dashoffset tricky werden

Haben Sie schon einmal diese coolen Demos gesehen, bei denen sich eine SVG-Form scheinbar selbst zeichnet? Das ist ein Trick, der stroke-dashoffset eines Elements in Verbindung mit der Eigenschaft stroke-dasharray animiert.

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Siehe den Pen Einfaches Beispiel für das Zeichnen von SVG-Linien, vorwärts und rückwärts von Chris Coyier (@chriscoyier) auf CodePen.

Diese Technik behandeln wir in diesem Beitrag im Detail.

Verwandt

• stroke
• stroke-dasharray
• stroke-linecap
• stroke-width

Weitere Informationen

• SVG 1.1 Spezifikation
• MDN zu Füllungen und Strichen

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Ja	Ja	Ja	Ja	9+	4.4+	Ja