using the <set> tag in SVG to change the rotation of a shape

Question

I am trying to set the rotated angle of a shape using the <set> tag but for the life of me I cant figure it out. What is the right syntax?

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

Edit: Clarification - I am trying to set it to a specific angle for a set time, not animate it there. I want it to jump from 0 rotation to 110 (in this example above)

Tweedy

This should work, but it doesn't: <set attributeName="transform" to="rotate(110 100 100)" begin="1s" dur="1.7s"/> I need to do the same thing but cannot figure it out. – Elysium

Answer 1

If you want an animation to jump from one state to another then specify calcMode="discrete". Like this for instance:

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

Citified

Took me a while but I finally got back to this. Cheers for the answer. – Tweedy

attributeName="transform" could be required – Stockjobber

Answer 2

You need the animateTransform element not animate. You may want to modify the additive and fill properties depending on your needs.

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

See the docu at W3C or at MDN.

Tarrant

animateTransform cannot be used with a zero duration, so it is not a discrete setting, as asked in the question. – Elysium

Answer 3

This is just a work around for your question. Found that the behavior of the set as, when you give it wrong attribute values, it triggers the onbegin event and does nothing to the element. So, using that, i have given wrong attribute values for the "to" attribute. So the set command triggers the begin event after 2s, but no transformation is applied to the element. Then, inside the onbegin event handler, i get the target element which in this case is rect with id c1. Then i apply the required transformation to it.(rotate 110 about center.)

Also the onend is triggered after 5s. Inside that, i test for the fill attribute value, and decide whether to revert the applied transformation.

This may be a work around but, there is no compromise in the begin value, duration value.

Also

<set attributeName="transform" to="200" ... /> translates in x dir with set behaviour

<set attributeName="transform" to="200 100" ... /> translates 200 in x dir and 100 in y dir with set behaviour

But cant find the syntax for rotate.

Placed a fiddle here http://jsfiddle.net/AA2tT/

Gimbals

-1 the question didn't ask for a Javascript solution, but for the correct declarative way to suddenly change the transform property, without any animation. – Elysium

Worth noting if anyone is having problems, that onend and onbegin don't get triggered in certain Chrome and Opera versions. There is a bug out on this. – Chapfallen

Answer 4

I couldn't find a satisfactory answer.

I finally coded it like this:

• put the original element away in a <defs>
• make two <use> of the element, one with the additional rotation, the other without
• set the two <use> to visible or hidden during the animation, according to the requirements

Example:

<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>

Elysium