SVG.js直線を移動して直線を移動する

Question

SVG.jsパスのアニメーションを移動してサイズを変更すると直線に追従させるには？

2パートのアニメーションがあります。最初に、SVGパスとしてのテキストが拡大され、矩形の中心に移動されます。その後、元のサイズに縮小し、長方形の反対側の角に移動する必要があります。

最初の部分は必要に応じてアニメーション化されますが、2番目の部分はテキストが表示領域から外れてから戻ってきます。

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/