Résoudre un défi de programmation courbe avec des dégradés SVG

Dans le monde de la programmation, des tâches apparemment simples peuvent se transformer en défis complexes. Récemment, nous avons rencontré un tel défi en essayant de transformer une conception Figma en code. La tâche à accomplir consistait à créer un cadran radial avec un dégradé linéaire - une exigence apparemment simple qui s'est rapidement avérée plus complexe que prévu.

Dans cet article, nous plongerons dans le monde des gradients SVG et explorerons la solution que nous avons conçue pour relever les défis qui se sont posés et nous expliquerons pourquoi, parfois, relever des défis d'ingénierie complexes comme celui-ci peut être très gratifiant.

Lancé une balle courbe

Au début, cela parait simple. Il doit y avoir une bibliothèque que nous pouvons utiliser pour créer le cadran et lui appliquer un dégradé linéaire. À quel point cela pourrait-il être difficile?

Et après une recherche rapide dans des bibliothèques d'investigation telles que High Charts et FusionCharts , nous avons trouvé des bibliothèques capables de créer des cadrans radiaux ainsi que de générer des dégradés linéaires à l'aide de SVG. Cependant, la véritable complexité est apparue lorsque l'on a tenté de combiner ces deux éléments de manière transparente. L'obstacle résidait dans la nature des gradients linéaires définis dans SVG. Par défaut, les dégradés linéaires font la transition entre les couleurs le long d'une ligne droite. Lorsqu'il est appliqué au trait d'un tracé circulaire, la direction du dégradé reste linéaire, sans tenir compte de la courbe du cercle.

Par conséquent, si nous devions appliquer un dégradé linéaire à un cadran circulaire complet créé avec une seule courbe, le dégradé suivrait une trajectoire rectiligne plutôt que la trajectoire radiale souhaitée le long du cadran. Cela n'atteindrait pas le dégradé incurvé que nous recherchions - nous étions donc de retour à la planche à dessin.

Décomposer le problème

Au lieu de cela, pour obtenir l'effet d'un dégradé de transition en douceur encerclant le cadran radial, nous avons réalisé que nous devions diviser le cadran en plusieurs sections et appliquer des dégradés distincts à chaque section.

Dans notre exemple, nous avons divisé le cadran en quatre sections ; chacun a attribué son propre gradient linéaire. En sélectionnant soigneusement les couleurs des arrêts de dégradé, nous avons pu créer une apparence de dégradé continu autour du cadran.

Ici, nous commençons à voir comment nous pouvons construire un cadran radial en SVG. L'attribut "d" définit un chemin à tracer. Dans ce cas, il précise la trajectoire du premier quart de notre cadran radial.

Le 'M' signifie "Déplacer vers" et définit le point initial du chemin aux coordonnées (150,10). La commande 'a' crée un arc elliptique. Cette commande d'arc a plusieurs paramètres. Les deux premiers paramètres, '120 120', définissent les rayons x et y de l'ellipse utilisée pour dessiner l'arc. Le '0 0 1' définit la rotation de l'axe x (qui est zéro), le grand drapeau d'arc et le drapeau de balayage. Le '103.9230 60' final définit le point final du chemin, qui complète notre arc. Nous appliquons ensuite le dégradé avec l'attribut trait sur le chemin.

Ce processus est répété pour chaque quart du cadran. Chaque quartier obtient son propre chemin et son propre gradient. Cela donne l'effet d'un dégradé unique et en douceur qui tourne autour du cadran.

Remplissage de dégradé dynamique

Pour remplir dynamiquement le dégradé le long du cadran, nous avons exploité les propriétés stroke-dashoffset et stroke-dasharray du chemin SVG. Cette technique est couramment utilisée lors de la création de cadrans radiaux. Les astuces CSS ont une description détaillée de l'approche : l'animation de ligne SVG fonctionne .

En définissant le stroke-dasharray égal à la longueur du chemin, nous avons établi un motif de tirets et d'espaces ressemblant à une ligne pointillée encerclant le cercle. La propriété stroke-dashoffset a déterminé le point de départ du motif de tirets, animant efficacement le mouvement du trait. En animant le stroke-dashoffset depuis le début du chemin jusqu'à la longueur du chemin, le tiret a semblé « voyager » autour du cercle.

Embrasser la complexité (parfois)

Bien que les conceptions complexes puissent se traduire par des défis techniques difficiles, elles offrent également aux programmeurs l'occasion de perfectionner leurs compétences en résolution de problèmes. Cela fait partie intégrante de ce qui rend la programmation intéressante, du moins pour moi.

Les complexités auxquelles nous sommes confrontés dans la programmation reflètent souvent la complexité des conceptions à partir desquelles nous travaillons. Notre design Figma, doté d'un cadran radial avec un dégradé linéaire, est un excellent exemple de la façon dont un élément de design visuellement attrayant peut introduire des défis techniques importants.

Il est facile pour les programmeurs d'essayer instinctivement de travailler avec les concepteurs pour trouver un compromis en termes de spécifications de conception. En fait, c'est souvent la bonne approche. Mais parfois, si vous voulez que vos conceptions se démarquent de la foule, vous devrez plutôt dépasser votre zone de confort et trouver des moyens créatifs de résoudre vos problèmes.

Une autre façon de le dire est que si les complexités de conception peuvent se traduire par des défis techniques, elles offrent également aux programmeurs des opportunités de perfectionner leur compétence la plus précieuse, leur capacité à résoudre des problèmes.

Également publié ici .