CODEWITHSUNDEEP
javascriptanimationsvg
heyneff
heyneff

Reputation: 11

Rotate path in SVG animation around somewhere other than stage origin

Trying to make a clock animation.

Current version is here: http://michaelneff.com/clock/

Looks like the hand is being rotated around 0,0 of the stage and I cannot figure out how to change the point around which to rotate the hand.

I'm adapting this from the Codrops tutorial here: http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/

I'm brand new to SVG animation so any help would be greatly appreciated. Thanks in advance.

Upvotes: 1

Views: 134

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101936

You can specify the centre of rotation by using the three parameter version of the rotate() transform.

transform="rotate(<angle> <cy> cy>)"

With animations you use

<animateTransform attributeName="transform" 
                      attributeType="XML"
                      type="rotate" 
                      from="0 60 70" 
                      to="360 60 70" />

Upvotes: 1

Related Questions