stroke-dashoffsetVlastnosť CSS definuje umiestnenie pozdĺž SVG cestu, kde pomlčka z a strokezačne. Čím vyššie číslo, tým ďalej pozdĺž cesty začnú pomlčky.
.module ( stroke-dashoffset: 100; )Pamätajte:
- To bude prepísať atribút prezentačné
- To nebude prepísať inline štýle napr
Hodnoty
Toto stroke-dashoffsetubytovacie zariadenie prijíma percentuálne alebo číselné hodnoty.
stroke-dashoffset: 100stroke-dashoffset: 25%
Upozorňujeme, že jednotky (tj. emA px) nie sú povinné. Číslo bez jednotiek sa vykreslí v jednotkách pixelov. Percento je relatívne k percentu aktuálneho výrezu.
Prezrite si vlastnosť Pen stroke-dashoffset od CSS-Tricks (@ css-tricks) na CodePen.
Začína byť zložitý stroke-dashoffset
Už ste niekedy videli tie super ukážky, kde sa zdá, že sa tvar SVG kreslí sám? Jedná sa o trik, ktorý animuje stroke-dashoffsetprvok v spojení s stroke-dasharrayvlastnosťou.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Pozrite si základný príklad pera kreslenia čiary SVG, dozadu a dopredu, Chrisa Coyiera (@chriscoyier) na CodePen.
Tejto technike sa v tomto príspevku venujeme oveľa podrobnejšie.
Súvisiace
strokestroke-dasharraystroke-linecapstroke-width
Viac informácií
- SVG 1.1 Spec
- MDN na výplniach a ťahoch
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Áno | Áno | Áno | Áno | 9+ | 4,4+ | Áno |