Html SVG.js按直线缩放和移动路径

如何使SVG.js路径动画在移动和调整大小时沿直线移动

有两个部分的动画。首先，文本作为SVG路径被放大并移动到矩形的中心。稍后，它需要缩小到原始大小，并移动到矩形的另一个角

第一部分根据需要设置动画，但第二部分文本将移出查看区域，然后返回

let draw = SVG('reading-area');
var group = draw.group();

original = group.svg(getSvgText());
original.animate(1000, '-', 0).move(229, 164).scale(3);
original.animate(2000, '-', 1000).scale(1).move(50, 315);

下面是一个工作示例。

---

在外部组移动而内部组缩放的位置添加两个嵌套组可以获得所需的效果

let draw = SVG('reading-area');
let group = draw.group();
let innerGroup=group.group();
original = innerGroup.svg(getSvgText());
group.animate(1000, '-', 0).move(229, 164)
original.animate(1000, '-', 0).scale(3);
group.animate(1000, '-', 0).move(50, 315)
original.animate(1000, '-', 0).scale(1);