SVG анимация - как сохранить текст в горизонтальном положении, когда его родитель вращается вокруг центральной точки

Question

У меня есть следующая анимация:

Я хочу, чтобы круг, содержащий анимацию ETH / USD, вращался вокруг центральной точки всех этих кругов,но сам текст я хочу оставить идеально горизонтальным.Как мне это сделать?

Если это поможет, я использую библиотеку svg.js (https://github.com/svgdotjs/svg.js)

Answer 1

Поверните круг против часовой стрелки вокруг своего центра, пока он вращается по часовой стрелке вокруг основного центра.

Пусть group - группа, содержащая небольшой круг с радиусом r и текст.Пусть они будут сосредоточены на (0,0).Пусть (cx, cy) будет центральной точкой вращения.Бесконечный цикл с ровным шагом по полному кругу за 15 секунд:

var group = draw.group();
group.circle(r, 0, 0);
group.text('ETH / USD');

group.animate(15000, '-').rotate(-360).loop()
     .animate(15000, '-').rotate(360, cx, cy).loop();