using the 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)

This *should* work, but it doesn't: `` I need to do the same thing but cannot figure it out. — Tobia, Mar 16 '13 at 14:25

Sirko · Answer 1 · 2012-03-25T14:25:43.533

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.

edited Mar 25 '12 at 14:25

answered Mar 25 '12 at 13:04

Sirko

65,767
19
135
167

animateTransform cannot be used with a zero duration, so it is not a discrete setting, as asked in the question. – Tobia Mar 16 '13 at 14:19

Robert Longson · Accepted Answer · 2014-10-09T16:31:28.947

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

edited Oct 09 '14 at 16:31

answered Mar 16 '13 at 16:03

Robert Longson

102,136
21
218
211

Took me a while but I finally got back to this. Cheers for the answer. – Doug Miller Oct 02 '13 at 02:14
`attributeName="transform"` could be required – mems Oct 09 '14 at 15:34

score 1 · Answer 3 · answered Mar 30 '12 at 05:45

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/

-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. — Tobia, Mar 16 '13 at 14:32
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. — Ian, Nov 06 '13 at 15:48

score 0 · Answer 4 · answered Mar 16 '13 at 15:46

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>

using the tag in SVG to change the rotation of a shape

4 Answers4