SVGコンポーネントにズーム

Question

私は、ユーザーが 'e'キーを押してコンポーネント上でズームするコンポーネントズームオプションを実装しようとしています。私は、ユーザーが増分ペースでsvg全体をズームしたいときにズームスライダを実行しているので、これに対して1つのズームレベルが必要です。ここ

私はテキスト「テスト」でコンポーネントを選択し、上でズームだ、実施例上記実施例の各々について http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom.png

http://i274.photobucket.com/albums/jj265/Erebel55/before_zoom2.png
http://i274.photobucket.com/albums/jj265/Erebel55/after_zoom2.png

のいくつかのスクリーンショットでありますそれ。ここで

は、私がこれまで http://jsfiddle.net/6Jg2A/3/

コンポーネントによって持っているもののjsfiddleですが、私はSVG内を意味します。画像、テキスト、および矩形が含まれます。

まだ完全には機能していません。たとえば、ピンクのコンポーネントを選択してeを押してズームすると、実際にズームしていないことがわかります。

私もコンポーネントを翻訳する必要があると思います。私は、そのやり方を頭に入れようとしています。

誰かが助けてくれると思います。ありがとう。

編集：また、ズームファクタは、私が思うと、コンポーネントのサイズに基づいて動的にする必要があります。つまり、コンポーネントをズームインする場合、最終結果は実際のサイズに依存しないズームコンポーネントでなければなりません。 （私はこれが意味をなさないことを願っています）

Answer 1

各要素を別々にするのではなく、SVGキャンバス全体をズームする方が簡単になります。また、ズームしている要素から変換を取得し、キャンバスのtranslateプロパティも調整する必要があります。

私が働き、迅速かつ汚い代替を表示するためにあなたのJSFiddleを更新しました：http://jsfiddle.net/6Jg2A/5/