La stroke-dasharraypropriété en CSS permet de créer des tirets dans le contour des formes SVG. Plus le nombre est élevé, plus il y a d'espace entre les tirets dans le trait.
.module ( stroke-dasharray: 5; )Rappelles toi:
- Cela va passer outre un attribut de présentation
- Cela ne remplacera pas un style en ligne, par exemple
Valeurs
La stroke-dasharraypropriété peut accepter n'importe quelle longueur, y compris les valeurs sans unité:
stroke-dasharray: 2stroke-dasharray: 2.5stroke-dasharray: 2emstroke-dasharray: 15%
Les valeurs sans unité sont probablement le choix le plus courant, comme c'est généralement le cas avec les valeurs SVG. Ils deviennent des unités de longueur relatives au système de coordonnées défini par le viewBox.
Voir la propriété Pen stroke-dasharray par CSS-Tricks (@ css-tricks) sur CodePen.
Devenir difficile avec stroke-dasharray
Avez-vous déjà vu ces démos sympas où une forme SVG semble se dessiner? C'est une astuce qui prend le stroke-dasharrayd'un élément et l'anime en conjonction avec la stroke-dashoffsetproprié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. Il semble qu'IE 11 et les versions antérieures n'aiment pas animer les propriétés du trait avec @keyframes, alors soyez prudent.
En rapport
strokestroke-dashoffsetstroke-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 |