SVG缩放到组件

时间:2012-03-29 21:23:29

标签: html svg web zoom

我正在尝试实现缩放到组件选项,其中用户按下“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

对于上面的每个例子,我选择带有“测试”文本的组件并放大它。

这是我到目前为止的jsfiddle http://jsfiddle.net/6Jg2A/3/

按组件,我的意思是在svg内。其中包含图像,文本和矩形。

它还没有完全发挥作用。例如,如果选择粉红色组件并按e进行缩放,则可以看到它没有真正正确缩放。

我认为我也需要翻译组件,我只是试图解决如何做到这一点。

想知道是否有人可以提供帮助。感谢。

编辑:此外,根据我认为的组件大小,缩放系数应该是动态的。换句话说,当放大组件时,最终结果应该是不依赖于其自身实际大小的缩放组件。 (我希望这是有道理的)

1 个答案:

答案 0 :(得分:1)

缩放整个svg画布会更容易,而不是分别缩放每个元素。您还需要从要缩放的元素中获取变换,并调整画布的translate属性。

我已经更新了你的JSFiddle,以显示一个有效的快捷方式:http://jsfiddle.net/6Jg2A/5/