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

Question

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

有2个部分动画。首先将文本作为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); 

这里是工作示例。 https://jsfiddle.net/ujwk8r7z/6/

Answer 1

添加2个嵌套组，其中外部组正在移动，内部组缩放得到所需的效果。

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

https://jsfiddle.net/ujwk8r7z/7/