SVG 动画 - 如何在其父级围绕中心点旋转时保持文本水平
SVG animations - how to keep text horizontal while its parent rotates around a center point
我有以下动画:
我希望包含 ETH / USD
动画的圆围绕所有这些圆的中心点旋转,但我希望文本本身保持完全水平。我该怎么做?
如果有帮助,我正在使用 svg.js 库 (https://github.com/svgdotjs/svg.js)
在绕主圆心顺时针旋转的同时,绕圆心逆时针旋转。
设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();
我有以下动画:
我希望包含 ETH / USD
动画的圆围绕所有这些圆的中心点旋转,但我希望文本本身保持完全水平。我该怎么做?
如果有帮助,我正在使用 svg.js 库 (https://github.com/svgdotjs/svg.js)
在绕主圆心顺时针旋转的同时,绕圆心逆时针旋转。
设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();