Die stroke-dasharrayEigenschaft in CSS dient zum Erstellen von Strichen im Strich von SVG-Formen. Je höher die Zahl, desto mehr Platz zwischen den Strichen im Strich.
.module ( stroke-dasharray: 5; )Merken:
- Dadurch wird ein Präsentationsattribut überschrieben
- Dies überschreibt keinen Inline-Stil, z
Werte
Die stroke-dasharrayEigenschaft kann eine beliebige Länge annehmen, einschließlich Werte ohne Einheit:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Werte ohne Einheit sind wahrscheinlich die häufigste Wahl, wie dies im Allgemeinen bei SVG-Werten der Fall ist. Sie werden zu Längeneinheiten, die relativ zu dem von der viewBox.
Siehe die Pen-Strich-Dasharray-Eigenschaft von CSS-Tricks (@ css-Tricks) auf CodePen.
Tricky mit stroke-dasharray
Haben Sie jemals diese coolen Demos gesehen, bei denen sich eine SVG-Form zu zeichnen scheint? Das ist ein Trick, der das stroke-dasharrayeines Elements nimmt und es in Verbindung mit der stroke-dashoffsetEigenschaft 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. Es sieht so aus, als würde IE 11 und niedriger die Stricheigenschaften nicht gerne mit @keyframes animieren. Seien Sie also dort vorsichtig.
verbunden
strokestroke-dashoffsetstroke-linecapstroke-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 |