スナップアニメーションを使用して指定された領域にSVG要素をスケーリング

Question

SVG要素のアニメーションをスケーリングして、SVGの特定の領域に（アスペクト比を維持して）フィットさせたいと思います。私は

VAR S =スナップ（ "＃1 MYELEMENT"）相対アニメーションを行うアニメーション知っ

。 s.animate（{'変換'： 't100,100s5,5,165,175'}、1000）;

原則として、翻訳とスケーリングのパラメータを計算することで、私が望むことを達成できるはずです。 問題点は、パラメータの正確な文書が見つかりません。 tの引数は、相対的なx、yの位置となり、スケールファクタとスケール中心の座標はsとなります。 しかし、翻訳とスケーリングの組み合わせはどのように機能しますか？相対的な翻訳位置はスケーリングなどでスケーリングされますか？

言い換えれば、アニメーションターゲット要素の左上と右下隅の座標から相対平行移動とスケーリングのパラメータを計算するにはどうすればよいですか？

また、スナップにはもっと適切なアニメーション機能がありますか？

Answer 1

Snap一つは、SVGを理解する必要がある問題を解決するために、SVGの構文を使用していますので、変換についてはこちらをご参照ください（紹介はhttps://sarasoueidan.com/blog/svg-transformations/です）。組み合わされたSVG変換を設定するには、各変換が（絶対座標フレーム内の要素のプロパティではなく）座標系を変更することを理解することが重要です。

2つの変換、スケーリングと変換を組み合わせると、2番目の変換のパラメータは最初の変換のパラメータに依存します。

SVGのViewBoxの座標で要素の所定の位置とサイズへの変換とスケーリングを実現するには、最初にスケーリングの中心座標を中心として新しいサイズにスケーリングを実行します要素。そして、これはあなたのSVGオブジェクトはID baseSVGを持っていることを前提としてい

function startAnimation() { 

var svg = Snap("#baseSVG"); 
/* get the bounding box of the svg */ 
var bboxSvg = svg.getBBox(); 

var s = Snap("#element"); 
/* get the bounding box of the element */ 
var bbox = s.getBBox(); 
/* get the required scale factor (assuming that we want to fit the element inside the svg bounding box) */ 
var scale = Math.min(bboxSvg.width/bbox.width,bboxSvg.height/bbox.height)*0.8; 
/* compute the translation needed to bring center of element to center of svg 
the scale factor must be taken into account since the translation is based on the coordinate system obtained after the previous scaling */ 
var tx = (200-bbox.cx)/scale; 
var ty = (200-bbox.cy)/scale; 
/* perform the animation (make center of scaling the center of element) */ 
s.animate({ 'transform' : 's' + scale + ',' + scale + ',' + bbox.cx + ',' + bbox.cy + 't' + tx + ',' + ty },1000,mina.bounce); 
s.drag(); 
} 

を次のように次の変換のための考慮事項が簡素化し、あなたが変換したい要素は、ID elementを持っています。それはSVGに適合するように変換されます（あなたがそれを大きくしたい場合や小さくしたい場合は0.8を調整します）。要素のコーナーの座標だけがわかっている場合は、まずターゲットの中心座標（bbox.cxとbbox.cyを置き換えます）とこのコードスニペットを適用するためのスケールを計算する必要があります。これは、座標フレームbaseSVGの明白な方法で機能します。

Answer 2

複数の部分でトランスフォームを表示します。これらの部品の順序は重要です。最初に翻訳し、後でスケールすると、結果の翻訳も縮尺されます。最初にスケールして翻訳した場合、変換結果はスケーリングの影響を受けません。

Snap.svgで使用するアニメーションも私が使用しています。 （Snap.svgは、例えばElectronとうまく再生されないので、しかし、私は、svg.jsへの移行を検討してください。私も、最初のいくつかのテストをしなければならない）