stroke-dasharrayProprietatea în CSS este pentru crearea de linii în cursa de forme SVG. Cu cât este mai mare numărul, cu atât mai mult spațiu între liniuțe în cursă.
.module ( stroke-dasharray: 5; )Tine minte:
- Aceasta va înlocui un atribut de prezentare
- Acest lucru nu va suprascrie un stil inline, de exemplu
Valori
stroke-dasharrayProprietatea poate accepta orice lungime, inclusiv valori fără unități:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Valorile fără unitate sunt probabil cea mai obișnuită alegere, deoarece se întâmplă în general cu valorile SVG. Devin unități de lungime care sunt relative la sistemul de coordonate configurat de viewBox.
Vedeți proprietatea Pen stroke-dasharray de către CSS-Tricks (@ css-tricks) pe CodePen.
Deveniți dificil cu stroke-dasharray
Ai văzut vreodată acele demonstrații interesante în care o formă SVG pare să se deseneze singură? Acesta este un truc care preia stroke-dasharrayun element și îl animă împreună cu stroke-dashoffsetproprietatea.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Vedeți Exemplul de bază al stiloului SVG Line Drawing, înapoi și înainte de Chris Coyier (@chriscoyier) pe CodePen.
Acoperim această tehnică mult mai detaliat în această postare. Se pare că IE 11 și versiunea inferioară nu-i place să animeze proprietățile accident vascular cerebral cu @keyframes, așa că aveți grijă acolo.
Legate de
strokestroke-dashoffsetstroke-linecapstroke-width
Mai multe informatii
- SVG 1.1 Spec
- MDN pe umpluturi și lovituri
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| da | da | da | da | 9+ | 4.4+ | da |