Il y a un peu plus d'une semaine, dans le cadre du concours Telegram, j'ai dû plonger dans le «monde magique» du svg, des formules mathématiques, de l'optimisation et de l'animation. La tâche de la compétition était de créer un graphique assez simple sur JS, mais certaines des nuances de la tâche et l'accent mis sur les performances le rendaient intéressant. Étant donné le désir de créer quelque chose avec une prétention à la victoire, il était nécessaire de plonger un peu plus profondément que le seuil habituel pour des projets typiques (et pas si) du monde du développement frontal.
Cela n'a pas fonctionné avec l'achèvement des travaux, mais ce temps n'a pas été perdu. La principale découverte a été la possibilité de travailler pleinement avec des graphiques 3D en SVG! Création de modèles, rotation sur un axe sélectionné, animation de script et bien plus encore - tout cela est disponible ici et maintenant.
La chose la plus importante
Initialisation d'un élément SVG en 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
Rotation sur un axe donné:
polyLine.rotateX(45); polyLine.rotateY(90);
Ajout de scènes et démarrage de l'animation:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
Démo
https://shtange.imtqy.com/svg-3d/ ( Sources )