Contours SVG pointillés : espacement et extrémités

Pour un contour SVG pointillé, donne un contour à la forme, définis stroke-linecap="round" et utilise un tiret de longueur nulle suivi d’un espace positif, par exemple stroke-dasharray="0 20". La largeur du contour contrôle le diamètre des points. Le second nombre de la liste contrôle la distance le long du tracé entre les centres des points ; ce n’est pas l’espace vide entre leurs bords visibles.

Cette distinction compte lorsqu’une bordure paraît trop serrée après avoir arrondi ses extrémités. Un badge fermé ajoute un autre problème : la répétition peut atteindre le point de départ avec un intervalle restant plus court. Les exemples ci-dessous séparent forme des extrémités, espacement visible et raccord de fermeture afin d’ajuster la bonne valeur.

Ce sont des réglages décoratifs de contour. Ils ne créent pas un nouveau contour décalé et ne transforment pas chaque point peint en tracé de découpe distinct.

Compare extrémités plates, arrondies et points

stroke-dasharray alterne les longueurs de tirets peints et d’espaces non peints. Une liste de deux nombres rend la répétition facile à inspecter. La référence MDN de la liste de tirets explique aussi comment une liste de longueur impaire se répète pour former une séquence de longueur paire.

Copie ce SVG autonome dans un fichier et ouvre-le dans un navigateur. Chaque tracé original mesure 240 unités, avec une largeur de contour de 8 :

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

La première ligne utilise 12 20 avec des extrémités plates. Ses tirets complets occupent 12 unités et laissent 20 unités d’espace visible. La seconde utilise les mêmes nombres avec des extrémités arrondies. Chaque extrémité dépasse de 4 unités le bout du tiret sous-jacent : un tiret complet occupe donc 20 unités et l’espace visible diminue à 12.

La troisième ligne réduit la longueur du tiret à zéro. Les extrémités arrondies créent des points de diamètre 8, dont les centres sont espacés de 20 unités sur ce tracé droit. Leur espace visible bord à bord est de 12 unités. Les règles de peinture SVG du W3C définissent les extrémités des tirets, y compris le traitement des tirets de longueur nulle ; la référence MDN des extrémités explique leur géométrie.

Pour des tirets complets et séparés sur un segment droit sans calibration de distance ni transformation, les calculs utiles sont :

• Extrémité plate : longueur visible du tiret = dash ; espace visible = gap.
• Extrémité arrondie : longueur visible du tiret = dash + stroke-width ; espace visible = gap - stroke-width.
• Point rond : diamètre = stroke-width ; espacement des centres = gap ; espace visible = gap - stroke-width.

Si le dernier calcul est nul ou négatif, les points se touchent ou se chevauchent. Dans les virages, la distance le long du tracé diffère de la distance directe entre les points. Inspecte les coins et les courbes au lieu d’appliquer le calcul de l’espace en ligne droite à tout le contour.

Ajuste la répétition autour d’un badge fermé

Les tracés de badges rectangulaires suivants mesurent chacun 180 sur 120 unités. Leur périmètre est 2 × (180 + 120) = 600. Le tracé part du coin supérieur gauche et tourne dans le sens horaire.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

À gauche, 0 32 place les centres des points à des distances de tracé 0, 32, 64, et ainsi de suite jusqu’à 576. Il ne reste que 24 unités avant le retour au départ. L’intervalle de fermeture est plus court que les autres intervalles de 32 unités : le raccord est donc irrégulier. Augmenter la taille d’affichage SVG amplifie ce décalage sans le résoudre.

À droite, 0 30 divise le périmètre en 20 intervalles égaux. Pour ce rectangle précis, les deux longueurs de côté sont aussi divisibles par 30 : les coins s’alignent donc avec les points. Le long de chaque côté rectiligne, les points de 8 unités laissent 22 unités d’espace visible. Cela corrige la répétition de ce badge ; cela ne garantit pas un espacement visuel identique sur tous les contours courbes.

Pour ton propre contour, choisis un nombre de points souhaité et divise le périmètre du tracé par ce nombre pour obtenir une distance de répétition initiale. Vérifie ensuite le résultat réellement rendu, particulièrement les virages, les petits détails et le point de fermeture. Une forme à plusieurs sous-tracés déconnectés nécessite une attention distincte, car le motif reprend au départ de chaque sous-tracé, comme l’indique la spécification de peinture SVG.

stroke-dashoffset déplace le départ du motif le long du tracé. Il peut placer un raccord voyant à un endroit moins visible, mais il ne rend pas 600 divisible par une répétition de 32 unités. Utilise une répétition ajustée lorsque tu veux une fermeture régulière. La référence MDN du décalage des tirets documente cet ajustement de phase.

Nous avons ouvert les deux fichiers SVG autonomes séparément et vérifié leur rendu navigateur par rapport à cette comparaison. Les exemples utilisent des valeurs sans unité, sans calibration pathLength, sans transformations et sans CSS externe. Ils démontrent ces tracés écrits à la main, et non une conversion PerfectVector ou un test de compatibilité entre applications.

Garde cohérents les réglages de taille et de peinture

Commence avec des valeurs numériques dans les coordonnées propres du SVG, comme ci-dessus. Ne les remplace pas par des pourcentages en supposant qu’ils représentent la même fraction du périmètre du tracé. La référence de la liste de tirets décrit une résolution des pourcentages par rapport à la zone d’affichage plutôt qu’à la longueur du tracé.

Si tu utilises pathLength pour normaliser les distances, calcule le motif de tirets dans ce système de distances calibré. Évite de mélanger le périmètre non calibré de cet exemple avec des valeurs de tirets normalisées d’un autre extrait. Le guide d’animation des contours SVG montre un autre usage de la calibration native de longueur du tracé pour révéler un dessin.

Définis fill="none" si tu veux uniquement la bordure. Un remplissage peut rester visible même lorsqu’une partie du contour est en tirets. Si les points attendus disparaissent, confirme que l’élément possède un contour visible et qu’une règle CSS n’a pas remplacé ses attributs de présentation. La liste de vérification des contours manquants couvre ces contrôles avant de commencer à modifier l’espacement.

Laisse assez d’espace autour de la géométrie pour son contour. Un contour de 8 unités dépasse le tracé, et les extrémités arrondies dépassent les bouts ouverts. L’exemple inclut des marges pour que ses points ne soient pas tronqués par la zone d’affichage. Teste le SVG livré à sa taille réelle d’affichage ; de petits points distincts dans un aperçu agrandi peuvent être difficiles à voir dans une icône.

Sépare la préparation du dessin de la conception de la bordure

Si le motif intérieur d’un badge existe seulement sous forme PNG ou JPG, la méthode image vers vecteur PerfectVector peut préparer un dessin SVG modifiable pour ce motif. Compare la silhouette, les petites ouvertures et les régions distinctes à l’image originale avant de le placer dans la bordure. Conserve le contour décoratif comme forme distincte pour modifier indépendamment sa largeur et l’espacement des points.

Conserve un original vectoriel existant lorsqu’il est disponible. Un rectangle ou une autre bordure simple se dessine généralement facilement dans un éditeur. La vectorisation ne conçoit pas automatiquement une bordure décalée, ne reconstruit pas une ligne centrale unique et ne choisit pas l’espacement des tirets. Si un symbole épais tracé possède deux limites, le guide des SVG à ligne unique explique pourquoi cela diffère d’un parcours de dessin unique.

Pour une méthode de découpe, ne suppose pas que la machine interprète la peinture décorative du contour comme des découpes individuelles en forme de points. Prépare la géométrie voulue dans un éditeur et inspecte l’aperçu de l’application cible. Cet article teste la peinture du navigateur, et non le comportement d’une machine de découpe. Les guides de modification du blog couvrent les décisions associées de préparation des fichiers.

Vérifie le contour final

Avant d’accepter le fichier, inspecte séparément le court tracé ouvert et la bordure fermée. Confirme le style d’extrémité, la largeur du contour et les nombres de répétition ; inspecte ensuite les premières et dernières marques du tracé ouvert et le raccord du tracé fermé. Vérifie les courbes serrées à la taille d’utilisation du dessin.

Rouvre le SVG enregistré dans sa destination prévue. Si tu veux une peinture décorative modifiable, conserve les propriétés de contour. Si la destination nécessite des contours permanents, effectue et vérifie cette conversion comme étape de modification distincte. Conserve une copie source modifiable afin de réviser l’espacement ultérieurement.

FAQ

Pourquoi mes tirets semblent-ils plus proches après le choix d’extrémités arrondies ? Les extrémités arrondies dépassent les deux bouts des tirets. Sur un segment droit, l’espace visible entre des tirets complets correspond à l’espace défini moins la largeur du contour, à condition que les marques restent séparées.

Comment créer des points ronds plutôt que de petites capsules ? Utilise un tiret de longueur nulle, un espace positif et des extrémités arrondies. Par exemple, une largeur de contour de 8 avec stroke-dasharray="0 20" produit des points de 8 unités dont les centres sont espacés de 20 unités sur un tracé droit.

Pourquoi un espace diffère-t-il autour d’un contour fermé ? La répétition ne divise peut-être pas régulièrement le périmètre. Ajuste-la à la longueur du tracé, puis inspecte le point de fermeture et les coins. Déplacer le décalage des tirets change la phase du motif, mais ne corrige pas le décalage arithmétique.

Sources

1. MDN — stroke-dasharray — Définit la liste alternée de tirets et d’espaces et le traitement de ses valeurs.
2. MDN — stroke-linecap — Explique la géométrie des extrémités plates et arrondies et le comportement à longueur nulle.
3. W3C — Peinture SVG — Spécifie la peinture des tirets, le traitement des extrémités et le motif sur les sous-tracés.
4. MDN — stroke-dashoffset — Définit le décalage utilisé pour déplacer un motif de tirets.

Si le motif de ton badge provient d’une image matricielle, prépare un SVG candidat avec PerfectVector, inspecte ses contours et ouvertures, puis ajoute la bordure pointillée comme forme distincte modifiable.