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();