Supposons que vous ayez une ligne en SVG :
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>Vous pouvez utiliser le stroke-dasharray propriété en CSS pour faire des tirets :
line {
stroke-dasharray: 5;
}Ceci 5 la valeur est une unité relative basée sur la taille des SVG viewBox. Nous pourrions utiliser n'importe quelle longueur CSS, vraiment. Mais ce qu'il fait, c'est créer un motif de tirets de 5 unités de long avec des espaces de 5 unités entre eux.
Jusqu'ici tout va bien. Nous pouvons utiliser deux valeurs où la deuxième valeur définit individuellement la longueur de l'espace :
Nous avons maintenant des tirets de 5 unités et des espaces de 10. Essayons une troisième valeur :
Vous voyez comment nous formons un modèle ici ? Ça va:
- Tiret : 5 unités
- Écart : 10 unités
- Tiret : 15 unités
On pourrait penser qu'il se répète après cela exactement à la même cadence. Mais non! Si c'était le cas, nous aurions des tirets qui se heurteraient:
- Tiret : 5 unités
- Écart : 10 unités
- Tiret : 15 unités
- Tiret : 5 unités
- Écart : 10 unités
- Tiret : 15 unités
- …etc.
Au lieu de cela, stroke-dasharray devient tout intelligent et duplique le modèle s'il y a un nombre impair de valeurs Donc…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;C'est en fait pourquoi une seule valeur fonctionne ! Plus tôt, nous avons déclaré un seul 5 évaluer. C'est vraiment la même chose que de dire stroke-dasharray: 5 5. Sans la deuxième valeur, stroke-dasharray duplique implicitement la première valeur pour obtenir un modèle répétable. Sinon, ce serait juste une ligne continue de tirets de 5 unités de long, mais sans espace entre eux !
Le motif dépend également de la taille de la forme elle-même. Notre SVG line est de 500 unités. Fixons plus grand stroke-dasharray valeurs et additionnez-les :
stroke-dasharray: 10 20 30 40 50; /* 150 units */Si le modèle s'exécute quatre fois (150 unités ⨉ 4 itérations), nous avons affaire à 600 unités au total. Ces 100 unités supplémentaires sont coupées pour empêcher le motif de déborder de lui-même.
C'est tout.
🎩 Chapeau pour Josué danse en appeler ça!
