utilizzando il tag <set> in SVG per modificare la rotazione di una forma

Question

Sto provando a impostare l'angolo ruotato di una forma utilizzando il tag set> < ma per la vita di me non riesco a capirlo. Qual è la sintassi corretta?

<set id="smallGearJump" 
     attributeName="transform" attributeType="XML" type="rotate" 
     to="110 100 100" begin="1s" dur="1.7s" /> 

Edit: Chiarimento - sto cercando di impostarlo su un angolo specifico per un tempo stabilito, non animarla lì. Voglio che passi da 0 a 110 (in questo esempio sopra)

Answer 1

Se si desidera che un'animazione passi da uno stato all'altro, specificare calcMode = "discrete".Così per esempio:

<animateTransform attributeName="transform" type="rotate" to="110 100 100" dur="1.7s" begin="1s" 
      calcMode="discrete" />  

Answer 2

È necessario l'elemento animateTransform non animate. È possibile modificare le proprietà additive e fill in base alle proprie esigenze.

<animateTransform id="smallGearJump" 
       attributeName="transform" attributeType="XML" 
       type="rotate" to="110 100 100" dur="1.7s" begin="1s" 
       additive="replace" fill="freeze" /> 

Vedere il docu al W3C o MDN.

Answer 3

Questa è solo una soluzione per la tua domanda. Trovato che il comportamento di set come, quando gli dai valori di attributo errati, attiva l'evento onbegin e non fa nulla all'elemento. Quindi, usando quello, ho dato valori di attributo errati per l'attributo "a". Quindi il comando set attiva l'evento begin dopo 2s, ma nessuna trasformazione viene applicata all'elemento. Quindi, all'interno del gestore di eventi onbegin, ottengo l'elemento di destinazione che in questo caso è rect con ID c1. Poi applico la trasformazione richiesta (ruotare 110 sul centro.)

Anche l'orologio viene attivato dopo 5s. Al suo interno, eseguo il test per il valore dell'attributo di riempimento e decido se annullare la trasformazione applicata.

Questo può essere un problema, ma non c'è alcun compromesso nel valore iniziale, valore di durata.

anche

<set attributeName="transform" to="200" ... /> traduce in x dir con comportamento set

<set attributeName="transform" to="200 100" ... /> traduce in 200 x dir e 100 in y dir con comportamento set

Ma cant trovare la sintassi per rotazione.

collocato un violino qui http://jsfiddle.net/AA2tT/

Answer 4

non riuscivo a trovare una risposta soddisfacente.

ho finalmente codificato in questo modo:

• mettere l'elemento originale via in un <defs>
• fare due <use> dell'elemento, quello con la rotazione supplementare, l'altro senza
• impostare due <use> visibile o nascosta durante l'animazione, in base ai requisiti

Esempio:

<defs> 
    <path id="example" d="..."/> 
</defs> 
<use xlink:href="#example" visibility="hidden"> 
    <set begin="0s" end="1s" attributeName="visibility" to="visible"/> 
</use> 
<use xlink:href="#example" visibility="hidden" transform="rotate(110 100 100)"> 
    <set begin="1s" end="3s" attributeName="visibility" to="visible"/> 
</use>