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/