Strich-Dashoffset - CSS-Tricks

Inhaltsverzeichnis

Die stroke-dashoffsetEigenschaft in CSS definiert die Position entlang eines SVG-Pfads, an der der Strich von a strokebeginnt. Je höher die Zahl, desto weiter entlang des Pfades beginnen die Striche.

.module ( stroke-dashoffset: 100; )

Merken:

  • Dadurch wird ein Präsentationsattribut überschrieben
  • Dies überschreibt keinen Inline-Stil, z

Werte

Die stroke-dashoffsetEigenschaft kann einen Prozentsatz oder einen numerischen Wert akzeptieren.

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

Beachten Sie, dass Einheiten (dh emund px) nicht erforderlich sind. Eine Zahl ohne Einheiten wird in Pixeleinheiten gerendert. Der Prozentsatz bezieht sich auf den Prozentsatz des aktuellen Ansichtsfensters.

Siehe die Pen-Strich-Dashoffset-Eigenschaft von CSS-Tricks (@ css-Tricks) auf CodePen.

Tricky mit stroke-dashoffset

Haben Sie jemals diese coolen Demos gesehen, bei denen sich eine SVG-Form zu zeichnen scheint? Dies ist ein Trick, der das stroke-dashoffsetElement in Verbindung mit der stroke-dasharrayEigenschaft animiert .

.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )

Siehe das Stift-Basisbeispiel für SVG-Strichzeichnungen, vorwärts und rückwärts von Chris Coyier (@chriscoyier) auf CodePen.

Wir behandeln diese Technik in diesem Beitrag ausführlicher.

verbunden

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

Mehr Informationen

  • SVG 1.1 Spec
  • MDN bei Füllungen und Strichen

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja

Interessante Beiträge...