Почему совершается лишние движение элемента в SVG?
 

Есть окружность по которой должен бегать мелкий круг, но после 3-го (шага) клика на next, элемент описывает полностью всю окружность и занимает позицию так таковую которая предполагалась.

Почему круг совершает движение по все окружности и возвращается в предполагаемое положение?

https://jsfiddle.net/yanyshevvd/r0svp54y/

villiwalla,
Подробно разбираться было некогда, но это animate() при rotate что-то пакостит... Выворачивается наизнанку.
Если убрать animate - шарик прыгает на положенное место, без лишних телодвижений. Правда, быстро.

В хроме нормально вроде, только иногда другой баг вылазит - до 100% не хочет доходить окружность (вроде есть шанс воспроизвести если нажимать Next в момент подхода анимации шага к завершению).

Попробую свою анимацию через style сделать, есть подозрение что matrix проблему подкидывает.

Странно что в хроме, т.к и у меня в хроме. Возможно попали на мои правки, сейчас вернул к моменту проблемы. Да баг есть, спасибо.

villiwalla,
Да, сейчас воспроизводится. В тот раз маленький кружок совсем не перемещался.

начиная с третьего клика маленький кружок больше 360 делать начинает.

Вот про это и речь