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)

Answer 1

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.

Answer 2

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