Gibt es ein Tool, das den 3D-Dreheffekt von Adobe Illustrator in SVG- oder CSS-Transformationen umwandelt?

Ich möchte eine Grafik als SVG exportieren und sie enthält Text, auf den ein 3D-Rotationseffekt angewendet wurde.

Beim Speichern als SVG wird mein Text zu Umrissen erweitert :(
Ich möchte stattdessen, dass er <text>mit tatsächlichen 3D-Transformationen ausgegeben wird, die darauf angewendet werden, etwa so:

<text id="Textu" style="-webkit-transform: matrix3d(0.7784, -0.2518, -0.5749, 0, 0.1727, 0.9665, -0.1894, 0, 0.6034, 0.0481, 0.7959, 0, 0, 0, 0, 1);">
...

Das ist CSS, ich würde SVG-Transformationen bevorzugen.

Gibt es ein Tool oder Plugin, das das kann? Ich habe die Werte aus dem Dialogfeld ( X, Y, Z, Perspective), kann ich sie selbst in SVG-Transformationen übersetzen?

Der Text soll mit JavaScript dynamisch verändert werden.

Ich weiß nicht, ob SVG diesen Komplex transformieren kann. Basierend auf den Dokumenten denke ich, dass dies nicht möglich ist. Was ist falsch an einer CSS-Transformation?
Ja, ich habe inzwischen herausgefunden, dass SVG keine 3D-Transformationen unterstützt. An CSS-Transformationen ist wirklich nichts auszusetzen. Ich hatte nur das Gefühl, dass es nicht "nativ" ist und auf Smartphones der unteren Preisklasse möglicherweise weniger anmutig funktioniert.
Ich kann keine Perspektive bekommen, um an SVG-Elementen oder zumindest Textelementen zu arbeiten. (Kommentare dürfen nur bearbeitet werden, weil Sie dumm sind.)
Können Sie bitte einige der SVG-Dateien bereitstellen, die Sie transformieren möchten?

Antworten (1)

Ich glaube nicht, dass es dafür einen einfachen Weg gibt. SVG-Transformationen können für flachere Animationen verwendet werden, z. B. zum Nachbilden einiger Funktionen des Materialdesigns, Erweitern von Elementen, Bewegungsunschärfe und dergleichen.

Geben Sie hier die Bildbeschreibung einVielleicht möchten Sie sich das einmal ansehen . Es ist etwas, das dem, was Sie brauchen, nahe kommen könnte, obwohl sich der Text immer noch nicht perfekt mit der Perspektive ändert.