A stroke-dasharrayCSS tulajdonság kötőjelek létrehozására szolgál az SVG alakzatok körvonalában. Minél nagyobb a szám, annál több hely van a vonások között a vonások között.
.module ( stroke-dasharray: 5; )Emlékezik:
- Ez lesz felülírja a bemutató attribútum
- Ez nem fogja felülírni az inline stílust, pl
Értékek
A stroke-dasharrayszálláshely bármilyen hosszúságot elfogad, beleértve az egység nélküli értékeket is:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Az egység nélküli értékek valószínűleg a leggyakoribb választás, mivel általában SVG-értékekkel. Hosszúsági egységekké válnak, amelyek viszonyítva vannak a viewBox.
Lásd a CSS-Tricks (@ css-tricks) Pen stroke-dasharray tulajdonságát a CodePen-en.
Trükkössé válni stroke-dasharray
Láttál már olyan hűvös demókat, ahol egy SVG alakzat rajzolja meg magát? Ez egy olyan trükk, amely stroke-dasharrayelveszíti az elemet és animálja a stroke-dashoffsettulajdonsággal együtt .
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Lásd Chris Coyier (@chriscoyier) SVG-vonalvezetésének toll-alappéldája, hátra és előre a CodePen-en.
Ebben a bejegyzésben sokkal részletesebben foglalkozunk ezzel a technikával. Úgy tűnik, hogy az IE 11 és a későbbi verziók nem szeretik a vonástulajdonságokat @keyframe-ekkel animálni, ezért ott vigyázzon.
Összefüggő
strokestroke-dashoffsetstroke-linecapstroke-width
Több információ
- SVG 1.1 Spec
- MDN a kitöltésekről és agyvérzésekről
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Igen | Igen | Igen | Igen | 9+ | 4.4+ | Igen |