Ich möchte animateTransform verwenden, um ein SVG-Bild kontinuierlich zu drehen. So, hier gehen wir:
%Vor%Das funktioniert.
Nun: Ich möchte das obige ändern, so dass sich der Block um seine Mitte dreht und nicht um seine obere linke Ecke. Ich weiß, dass ich, wenn ich den Block statisch um seinen Mittelpunkt drehen möchte, dies tun kann:
%Vor%Meine Frage ist - wie kann ich eine kontinuierliche animierte Rotation um das Zentrum des Blocks verwalten? Ich habe mir die Spezifikation und ein paar andere verwandte Fragen auf SO, aber ich habe Probleme mit der Umsetzung der Erläuterungen geliefert.
Vielen Dank im Voraus.
Die Attribute 'von', 'nach' und 'nach' nehmen einen Wert an, der mit derselben Syntax ausgedrückt wird, die für den angegebenen Transformationstyp verfügbar ist:
(...)
Für einen Typ="rotieren" wird jeder einzelne Wert als & lt; Rotationswinkel & gt; [& lt; cx & gt; & lt; cy & gt;]
Sie können das Zentrum für die Rotation angeben, wenn Sie zwei zusätzliche Werte, cx und cy, angeben.
Also fügst du für deinen Code "50 50" in das Attribut "von" und "bis" ein:
%Vor%Es funktioniert mit der neuesten Version von Opera, Safari und Chrome, auch mit Firefrox 4 Beta und Batik.
Um es klar zu sagen: Was wir zu erreichen versuchen, ist die Rotation um ein Zentrum, das selbst übersetzt wird. Ich finde, dass wenn ich einen & lt; animateTransform type = rotiere & gt ;, kann ich & lt; animateMotion & gt; nicht verwenden, und & lt; animateTransform type = translate & gt; Simultanübersetzung durchführen. Es (neueste Chrome oder Firefox) interpoliert nicht das Zentrum der Drehung wie gewünscht, was zu einer "Schleife de Schleife" statt. Mit einem einfachen & lt; animate & gt; für jede der x, y-Koordinaten funktioniert wie gewünscht; In diesem Fall & lt; animateTransform type = rotiere & gt; interpoliert das Zentrum entlang des x, y-Pfads, solange Sie den Parameter from = auf den Startwinkel setzen, x starten und y-Position starten und den Parameter to = auf die Endwerte setzen.