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/