CODEWITHSUNDEEP
svgsvg-animate
Neda Homa
Neda Homa

Reputation: 4357

svg rotate path around a point

I have a svg with couple of paths: https://jsfiddle.net/homa/sbvsjxqe/

I want to rotate the paths around center. When I add the following code, the path goes outside of view and rotate around a very large circle:

<animateTransform attributeName="transform"
                  attributeType="XML" 
                  type="rotate"
                  from="0 50 50"
                  to="360 50 50" 
                  dur="7s"
                  repeatCount="indefinite" />

How can I force the path to rotate around center?

Upvotes: 0

Views: 1164

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The second and third numbers in the from and to attributes are the coordinates of the centre of rotation.

Set them to the point you want to rotate around. It is probably not (50,50).

Upvotes: 1

Related Questions