Dégradé SVG sur un chemin : vérifier la couleur au virage

Un linearGradient SVG ordinaire ne mesure pas la progression le long d’un chemin courbe. Il peint selon un vecteur de dégradé dans un système de coordonnées. Si un ruban revient sur lui-même, deux points à la même position le long de ce vecteur peuvent recevoir la même couleur, même s’ils sont très éloignés sur le ruban.

Pour un dessin statique dont la couleur doit progresser autour d’un virage, tu peux créer des sections colorées séparées. Tu contrôles ainsi la séquence, mais tu ajoutes de la géométrie et des limites de couleur visibles. Notre exemple original compare un dégradé horizontal à huit bandes choisies sur le même parcours créé par nos soins. Les deux fichiers contiennent des chemins et aucune image intégrée.

Vérifie où la couleur se répète

La spécification des serveurs de peinture SVG2 définit les dégradés linéaires par un vecteur et ses étapes de couleur. Elle décrit les dégradés radiaux par leur propre géométrie circulaire. Aucune de ces définitions ne transforme un chemin quelconque en axe de couleur fondé sur la distance parcourue.

Notre ruban commence en haut à gauche, va vers la droite, contourne un demi-cercle et revient en bas à gauche. Un dégradé horizontal rend les deux extrémités gauches orange et le virage droit violet. C’est un dégradé de coordonnées valide ; il répond simplement à une autre question de conception que « changer de couleur du début à la fin de ce parcours ».

Le tutoriel de dégradés de MDN explique le modèle d’extrémités et d’étapes. Ajouter des étapes change cette séquence de couleur fondée sur les coordonnées. Cela ne fait pas suivre la courbe à la peinture.

Couleur de coordonnées et bandes créées

Garde un dégradé ordinaire comme contrôle

Enregistre ce fichier complet sous coordinate.svg. Le chemin utilise un trait de 24 unités dans un viewBox de 200×160. Ses portions droites et son demi-cercle droit forment une seule ligne centrale modifiable.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>

Nous utilisons gradientUnits="userSpaceOnUse" pour rendre les extrémités du dégradé explicites dans le système de coordonnées source. Passer à des coordonnées de boîte englobante changerait la façon d’exprimer ces extrémités ; cela n’introduirait pas une peinture fondée sur la distance du chemin. Consulte la référence de gradientUnits et notre guide des coordonnées de dégradé.

Le parcours complet est un élément path. Garde cette version simple comme maître géométrique, même si tu choisis de livrer un traitement de couleur plus élaboré.

Crée une séquence par paliers autour du virage

Enregistre ce qui suit sous bands.svg. Il divise la portion droite supérieure en deux morceaux, le demi-cercle en quatre arcs et la portion droite de retour en deux morceaux. Les couleurs sont attribuées dans l’ordre du parcours, de l’orange au départ supérieur au violet à l’arrivée inférieure.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
  <path d="M30 30 H75" stroke="#e36b2c"/>
  <path d="M75 30 H120" stroke="#d38d31"/>
  <path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
  <path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
  <path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
  <path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
  <path d="M120 130 H75" stroke="#5265b2"/>
  <path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>

Ce sont huit bandes choisies manuellement avec des segments de longueurs inégales. Elles ne calculent pas des incréments de couleur uniformes par unité de longueur du chemin et ne créent pas d’ombrage continu. Les extrémités décimales arrondies des arcs approchent le parcours original ; cet exemple ne revendique pas un contour identique au pixel près.

La référence de path documente l’élément et ses données de chemin. Chaque section reste ici une ligne centrale avec un trait, plutôt qu’une forme remplie fermée issue de la conversion du contour. Si une destination exige des formes fermées, prépare et examine cette géométrie séparément au lieu de traiter ces morceaux de trait comme des contours de coupe.

Nous utilisons stroke-linecap="butt" pour que les morceaux adjacents ne dépassent pas leurs extrémités. Des terminaisons rondes sur chaque section interne recouvriraient les couleurs voisines. Les transitions de droite à arc nécessitent aussi des directions concordantes ; notre guide des raccords lisses traite séparément de la continuité géométrique.

Compare deux tailles et deux positions

Nous avons rendu les deux fichiers originaux dans Chrome à 200×160 et 400×320 pixels CSS. Le navigateur décodait chaque SVG, puis le peignait dans un canevas dont les dimensions du tampon correspondaient aux dimensions de test. Le rapport de pixels de l’appareil du navigateur était de 2 ; ces échantillons enregistrés proviennent du tampon du canevas, pas d’un comptage des pixels d’appareil sur une capture.

Aux coordonnées sources (60,30) et (60,130), les points se trouvent sur des portions droites différentes du parcours. Ils partagent la même coordonnée horizontale : le dégradé horizontal leur donne donc la même couleur échantillonnée.

Les paires d’échantillons étaient identiques aux deux tailles testées, avec un alpha de 255 dans les parties peintes. La zone ouverte à la coordonnée source (100,80) avait un alpha nul dans les six cas. Cela vérifie ces fichiers créés dans ce navigateur ; cela ne certifie pas tous les moteurs de rendu ni tous les pixels de limite.

Le rendu en bandes garde des changements de couleur discrets visibles aux deux tailles. Examine les raccords à la taille livrée, surtout après exportation ou intégration. Des morceaux séparés peuvent révéler des jointures à cause de l’anticrénelage, des arrondis ou de modifications ultérieures. Augmenter le nombre de sections peut réduire chaque saut de couleur, mais crée aussi davantage de chemins et de limites à maintenir.

Choisis le traitement avant de décomposer le dessin

Faire pivoter un dégradé linéaire change sa direction. Le répéter change la façon dont ses couleurs se prolongent. Aucune de ces opérations ne le fait tourner continuellement avec cette ligne centrale qui revient. Un dégradé radial peut convenir à une composition circulaire, mais il utilise sa propre géométrie de peinture plutôt qu’une solution générale fondée sur la distance du parcours.

Si tu ajustes la courbe plus tard, révise les sections ensemble. Garde un maître plat pour comparer le parcours voulu et conserve la copie du traitement de couleur séparément. Notre guide des chemins relatifs peut aider à lire ou déplacer les commandes de chemin sous-jacentes.

Si ton dessin de départ est un PNG ou JPG et que tu as besoin de contours modifiables, convertis la source avec PerfectVector, examine la forme et les zones ouvertes récupérées, puis garde un maître SVG propre. Choisis ou reconstruis le traitement de couleur après cette vérification géométrique. La vectorisation ne garantit pas la récupération exacte d’un ombrage continu et n’invente pas de fonction native de dégradé le long d’un chemin. Un SVG propre existant nécessite directement une modification de peinture et de géométrie ; le guide de vectorisation d’images explique quand une conversion matricielle aide.

Questions fréquentes

Puis-je faire suivre n’importe quel trait courbe à un linearGradient ? La définition ordinaire de linearGradient ne fournit pas de réglage de distance du chemin. Son vecteur de coordonnées contrôle la peinture. L’exemple par paliers attribue des couleurs séparées à des sections séparées du parcours.

Davantage d’étapes de dégradé corrigeront-elles les couleurs répétées au retour ? Davantage d’étapes peuvent affiner les transitions de couleur le long du vecteur du dégradé. Les points à la même position sur ce vecteur partagent toujours la même peinture fondée sur les coordonnées.

Le fichier à bandes contient-il une image matricielle ? Non. Notre exemple créé contient huit éléments path et aucun élément image. Il présente aussi des paliers de couleur visibles plutôt qu’un dégradé continu fondé sur la distance du chemin.

Faut-il remplacer chaque dégradé par des chemins séparés ? Utilise le dégradé de coordonnées plus simple lorsqu’il convient au dessin. Des sections séparées sont utiles lorsque leur progression et leur coût de modification sont acceptables ; examine les jointures et le rendu de destination avant livraison.

Sources

1. W3C — Serveurs de peinture SVG2 — Vecteurs de dégradé, étapes et peinture fondée sur les coordonnées.
2. MDN — Dégradés en SVG — Construction des dégradés linéaires et radiaux.
3. MDN — gradientUnits — Systèmes de coordonnées en espace utilisateur et de boîte englobante.
4. MDN — path — Éléments de chemin et données de chemin inspectables.
5. MDN — stroke-linecap — Comportement des extrémités de trait plates et rondes.