Die stroke-dashoffset
Eigenschaft in CSS definiert die Position entlang eines SVG-Pfads, an der der Strich von a stroke
beginnt. 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-dashoffset
Eigenschaft kann einen Prozentsatz oder einen numerischen Wert akzeptieren.
stroke-dashoffset: 100
stroke-dashoffset: 25%
Beachten Sie, dass Einheiten (dh em
und 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-dashoffset
Element in Verbindung mit der stroke-dasharray
Eigenschaft 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 |