Хочу начать с самого простого и надежного вида анимации, которая корректно отображается почти во всех браузерах, даже в IE6 🙂
это – “animateTransform attributeName=”transform” type=”rotate” – поворот объекта на заданный угол вокруг точки.

Для вращения стрелки на полный оборот необходимо изменять угол с “0” до “360” градусов. И еще нужно найти центр относительно, которого будет вращаться стрелка, в нашем случае при размерах рабочей области 200×200 px это – (100,100). Для простоты я совместил центр квадрата и центр линии. На практике нужно искать центр линии.

В листинге выше, 4 строка кода – это команда начать анимацию при наведении мышки на объект startButton В качестве объекта, запускающего анимацию, может быть любая фигура документа SVG, в том числе и кнопка, которой нужно присвоить уникальное имя в параметре id =”..” Следующий параметр: dur=”4s” – длительность одного цикла анимации в секундах.
5 строка – указывает, что будет два цикла (два оборота стрелки) за 4 сек. каждый. Параметр restart=”whenNotActive” – запрещает новый запуск пока анимация не закончится.

Строки 27-31 листинга ниже создают кнопку “Start” (id=”startButton”).
Строки 36-42 реализуют анимацию – поворот стрелки на два оборота.
Строки 45-50 отвечают за отрисовку 3-х линий формирующих стрелку.
Остальной код – графическое оформление.

Анимация запускается после клика по любой кнопке.
Кнопка “Х1” – первая скорость, которая задается параметром dur=”4s”

“Х2” – вторая скорость задается dur=”2s”
“Х4” – третья скорость задается dur=”0.5s”
Видна сразу зависимость, – чем короче цикл, заданный параметром “dur”, тем выше скорость.
Идея, как реализовать этот алгоритм состоит в следующем: каждой кнопке присваивается уникальное имя id=”startButtonNN” строки листинга ниже: 30, 35,40.