stroke-dashoffsetNieruchomość w CSS określa lokalizację wzdłuż ścieżki SVG gdzie kreska tematyce strokerozpocznie. Im wyższa liczba, tym dalej na ścieżce zaczną się kreski.
.module ( stroke-dashoffset: 100; )Zapamiętaj:
- Spowoduje to zastąpienie atrybutu prezentacji
- Nie spowoduje to zastąpienia stylu wbudowanego, np
Wartości
stroke-dashoffsetNieruchomość może zaakceptować procent lub wartość liczbową.
stroke-dashoffset: 100stroke-dashoffset: 25%
Należy pamiętać, że jednostki (tj. emI px) nie są wymagane. Liczba bez jednostek jest renderowana w jednostkach pikseli. Wartość procentowa jest odniesiona do wartości procentowej bieżącej rzutni.
Zobacz właściwość Pen stroke-dashoffset autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Podstępne z stroke-dashoffset
Czy widziałeś kiedyś te fajne dema, w których kształt SVG wydaje się sam rysować? To sztuczka, która ożywia stroke-dashoffsetelement elementu w połączeniu z stroke-dasharraywłaściwością.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Zobacz Podstawowy przykład rysowania linii SVG, wstecz i do przodu autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Bardziej szczegółowo omawiamy tę technikę w tym poście.
Związane z
strokestroke-dasharraystroke-linecapstroke-width
Więcej informacji
- SVG 1.1 Spec
- MDN na wypełnieniach i obrysach
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| tak | tak | tak | tak | 9+ | 4.4+ | tak |