如何使用svg.js实现矩形移动与旋转同步动画？

问题原因 #

当前代码里，移动动画时长为5000ms，旋转动画时长为1500ms，两者各自独立循环，导致节奏完全不同步；同时默认旋转原点是矩形左上角，移动时旋转中心会跟着位移，视觉效果不符合预期。

解决方案 #

把移动和旋转操作放到同一个动画实例中，确保两者共享相同的时长与循环逻辑，同时将旋转中心设置为矩形自身中心，优化视觉表现：

修改后的JS代码：

var ele = document.getElementById('svg_1')
var timeline = new SVG.Timeline();
var x = 200, y = 0;

const svgRect = SVG(ele);
// 将旋转中心设为矩形自身中心（初始位置x=100,y=50，宽高50，中心坐标为125,75）
svgRect.center(125, 75);
svgRect.timeline(timeline);

// 同一个动画链中同步执行移动与旋转
svgRect.animate(5000, 0, 'now')
  .dmove(x, y)
  .rotate(360)
  .loop();

代码说明 #

• svgRect.center()用于调整旋转中心到矩形自身中心，避免绕左上角旋转的违和感；
• 将dmove()和rotate()链式调用在同一个animate()实例下，保证两个变换在5000ms内同步完成，循环时也保持节奏一致；
• HTML部分无需修改，保持原有结构即可。

内容的提问来源于stack exchange，提问作者wpindesign