Den stroke-dashoffseteiendom i CSS definerer plasseringen langs en SVG banen der dash av en strokevil begynne. Jo høyere tall, jo lenger langs stien vil bindestrekene begynne.
.module ( stroke-dashoffset: 100; )Huske:
- Dette vil overstyre en presentasjon attributt
- Dette overstyrer ikke en innebygd stil, f.eks
Verdier
Den stroke-dashoffsetegenskapen kan godta en prosent eller en numerisk verdi.
stroke-dashoffset: 100stroke-dashoffset: 25%
Merk at enheter (dvs. emog px) ikke er påkrevd. Et tall uten enheter gjengis i pixelenheter. Prosentandelen er relativt til prosentandelen av gjeldende visningsport.
Se egenskapen Pen stroke-dashoffset av CSS-Tricks (@ css-tricks) på CodePen.
Bli vanskelig med stroke-dashoffset
Har du noen gang sett de kule demoer der en SVG-form ser ut til å tegne seg selv? Det er et triks som animerer stroke-dashoffsetelementet i forbindelse med stroke-dasharrayeiendommen.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Se pennens grunnleggende eksempel på SVG-linjetegning, bakover og fremover av Chris Coyier (@chriscoyier) på CodePen.
Vi dekker denne teknikken mye mer detaljert i dette innlegget.
I slekt
strokestroke-dasharraystroke-linecapstroke-width
Mer informasjon
- SVG 1.1 spesifikasjon
- MDN på fyll og slag
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Ja | Ja | Ja | Ja | 9+ | 4.4+ | Ja |