Vor etwas mehr als einer Woche musste ich im Rahmen des Telegrammwettbewerbs in die „magische Welt“ von SVG, mathematischen Formeln, Optimierung und Animation eintauchen. Die Wettbewerbsaufgabe bestand darin, ein ziemlich einfaches Diagramm für JS zu erstellen, aber einige der Nuancen der Aufgabe und die Betonung der Leistung machten es interessant. Angesichts des Wunsches, etwas mit einem Anspruch auf Sieg zu schaffen, war es notwendig, etwas tiefer als die übliche Schwelle für typische (und nicht so) Projekte aus der Welt der Front-End-Entwicklung zu tauchen.
Mit dem Abschluss der Arbeiten hat es nicht geklappt, aber diese Zeit wurde nicht verschwendet. Die wichtigste Entdeckung war die Fähigkeit, vollständig mit 3D-Grafiken in SVG zu arbeiten! Modelle erstellen, um eine ausgewählte Achse drehen, Skriptanimationen und vieles mehr - all dies ist hier und jetzt verfügbar.
Das wichtigste
Initialisieren eines SVG-Elements als 3D:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
Drehung um eine bestimmte Achse:
polyLine.rotateX(45); polyLine.rotateY(90);
Hinzufügen von Szenen und Starten der Animation:
polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
Demo
https://shtange.imtqy.com/svg-3d/ ( Quellen )