Renzous Rakesh Renzous Rakesh - 3 months ago 24
CSS Question

Basic rotation using Snap.svg

I am trying to rotate the svg as it translates along, but i cant make it rotate on its axis. Is there a way to make it rotate on its own axis ?

jsFiddle

js Code

var paper = Snap('#svg');
matrix = new Snap.Matrix().translate(630, -95);
var start_gear = paper.path("M51.7,29.5v-7.2h-5.2c-0.5-3.1-1.6-6-3.3-8.5l3.4-3.4l-5.1-5.1l-3.2,3.2c-2.6-2-5.6-3.4-8.8-4V0.3h-7.1v4.1 c-3.4,0.5-6.5,1.7-9.2,3.6l-2.8-2.8l-5.1,5.1L8,12.9c-2,2.7-3.3,5.8-3.8,9.2H0v7.1h4.2c0.6,3.4,2,6.6,4,9.2l-2.8,2.8l5.1,5.1 l2.9-2.9c2.6,1.7,5.6,2.9,8.9,3.4v5.3h7.2v-5.4c3.1-0.6,6-1.9,8.5-3.7l3.6,3.6l5.1-5.1l-3.7-3.7c1.7-2.5,2.9-5.3,3.5-8.3H51.7z M25.8,38.1c-6.6,0-12-5.4-12-12c0-6.6,5.4-12,12-12c6.6,0,12,5.4,12,12C37.8,32.8,32.4,38.1,25.8,38.1z").transform(matrix);
start_gear.attr({fill: "#e8434d"});
start_gear.animate({ transform: 't630, 240 r540,22,20' }, 3000, mina.bounce);

Ian Ian
Answer

If you don't include your own center of rotation, Snap will use its calculated bounding box center to rotate around. So it's as simple as removing that.

start_gear.animate({ transform: 't630, 240 r540' }, 3000, mina.bounce);