svg - SVG 动画 - 如何在其父级围绕中心点旋转时保持文本水平

Question

我有以下动画：

我希望包含ETH / USD动画的圆圈围绕所有这些圆圈的中心点旋转，但我希望文本本身保持完全水平。我该怎么做呢？

如果有帮助，我正在使用 svg.js 库（https://github.com/svgdotjs/svg.js）

标签： svgtextrotationtransformtransformation

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