SVG Zoom to Component

Question

I'm trying to implement a zoom to component option where the user presses the 'e' key and it zooms right onto the component. I only want there to be one zoom level for this, since I am doing a zoom slider for when the user wants to zoom the entire svg at an incremental pace.

Here are some screenshots of examples 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

For each of the above examples, I'm selecting the component with the text "testing" and zooming in on it.

Here is the jsfiddle of what I have so far http://jsfiddle.net/6Jg2A/3/

By component, I mean a within the svg. Which contains an image, text, and rect.

It isn't fully working yet. For example, if you select the pink component and press e to zoom you can see that it doesn't really zoom to it correctly.

I think that I need to translate the components as well, I'm just trying to wrap my head around how to do that.

Wondering if anyone could help. Thanks.

Edit: Also, the zoom factor should be dynamic based on component size I think. In other words, when zooming in on a component the end result should be a zoomed component that isn't dependent on the actual size of itself. (I hope this makes sense)

Answer 1

It will be easier to zoom the entire svg canvas, not each element separately. You'll also want to grab the transform from the element you're zooming to and adjust the translate property of the canvas as well.

I've updated your JSFiddle to show a quick and dirty alternative that works: http://jsfiddle.net/6Jg2A/5/