SVG縮放到組件

Question

我試圖實現一個縮放組件選項，其中用戶按下'e'鍵並將其放大到組件上。我只希望這裏有一個縮放級別，因爲我正在爲用戶想要以增量速度縮放整個svg時做縮放滑塊。

下面是示例 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/