La stroke-dashoffsetpropriété en CSS définit l'emplacement le long d'un chemin SVG où le tiret de a strokecommencera. Plus le nombre est élevé, plus les tirets commenceront le long du chemin.
.module ( stroke-dashoffset: 100; )Rappelles toi:
- Cela va passer outre un attribut de présentation
- Cela ne remplacera pas un style en ligne, par exemple
Valeurs
La stroke-dashoffsetpropriété peut accepter un pourcentage ou une valeur numérique.
stroke-dashoffset: 100stroke-dashoffset: 25%
Notez que les unités (c. em-à- d. Et px) ne sont pas requises. Un nombre sans unités est rendu en unités de pixels. Le pourcentage est relatif au pourcentage de la fenêtre courante.
Voir la propriété Pen stroke-dashoffset par CSS-Tricks (@ css-tricks) sur CodePen.
Devenir difficile avec stroke-dashoffset
Avez-vous déjà vu ces démos sympas où une forme SVG semble se dessiner? C'est une astuce qui anime le stroke-dashoffsetd'un élément en conjonction avec la stroke-dasharraypropriété.
.path ( stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards; ) @keyframes dash ( to ( stroke-dashoffset: 0; ) )Voir l'exemple de base du stylo de dessin de ligne SVG, en arrière et en avant par Chris Coyier (@chriscoyier) sur CodePen.
Nous couvrons cette technique plus en détail dans cet article.
En rapport
strokestroke-dasharraystroke-linecapstroke-width
Plus d'information
- Spécifications SVG 1.1
- MDN sur les remplissages et les traits
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Oui | Oui | Oui | Oui | 9+ | 4.4+ | Oui |