Verwenden Sie das Set-Tag in SVG, um die Drehung einer Form zu ändern

9

Ich versuche den gedrehten Winkel einer Form mit dem & lt; set & gt; Etikett, aber für das Leben von mir kann ich es nicht herausfinden. Was ist die richtige Syntax?

%Vor%

Bearbeiten: Klarstellung - Ich versuche, es für eine bestimmte Zeit auf einen bestimmten Winkel einzustellen und nicht dort zu animieren. Ich möchte, dass es von 0 auf 110 rotiert (in diesem Beispiel oben)

    
Hyposaurus 25.03.2012, 12:38
quelle

4 Antworten

1

Wenn Sie möchten, dass eine Animation von einem Zustand in einen anderen springt, geben Sie calcMode="diskret" an. So zum Beispiel:

%Vor%     
Robert Longson 16.03.2013, 16:03
quelle
2

Sie benötigen das animateTransform Element nicht animate . Möglicherweise möchten Sie die Eigenschaften additive und fill entsprechend Ihren Anforderungen ändern.

%Vor%

Sehen Sie sich die Dokumentation unter W3C oder unter MDN .

    
Sirko 25.03.2012 13:04
quelle
1

Dies ist nur eine Arbeit für Ihre Frage.     Gefunden, dass das Verhalten der set wie, wenn Sie es falsche Attributwerte geben, löst es das Onbegin-Ereignis und tut nichts für das Element.     Also habe ich falsche Attributwerte für das Attribut "to" angegeben. Der set-Befehl löst also das begin-Ereignis nach 2s aus, aber es wird keine Transformation auf das Element angewendet.     Dann, innerhalb der Onbegin-Event-Handler, bekomme ich das Zielelement, das in diesem Fall rect mit ID c1 ist. Dann wende ich die erforderliche Transformation darauf an (rotiere 110 um den Mittelpunkt.)

Auch der eine wird nach 5s ausgelöst. Innerhalb davon teste ich den Füllattributwert und entscheide, ob die angewendete Transformation rückgängig gemacht werden soll.

Dies kann ein Problem sein, aber es gibt keine Kompromisse in der Startwert, Dauer Wert.

Auch

<set attributeName="transform" to="200" ... /> wird in x dir mit festgelegtem Verhalten umgesetzt

<set attributeName="transform" to="200 100" ... /> setzt 200 in x dir und 100 in y dir mit festgelegtem Verhalten um

Aber kann die Syntax für rotieren nicht finden.

Hier eine Geige platziert Ссылка

    
rajkamal 30.03.2012 05:45
quelle
0

Ich konnte keine befriedigende Antwort finden.

Ich habe es schließlich so codiert:

  • legt das ursprüngliche Element in einem <defs> weg
  • macht zwei <use> des Elements, eines mit der zusätzlichen Rotation, das andere ohne
  • setzt die beiden <use> während der Animation entsprechend den Anforderungen
  • sichtbar oder ausgeblendet

Beispiel:

%Vor%     
Tobia 16.03.2013 15:46
quelle

Tags und Links