0

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)

1 Answer 1

Reset to default
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/

2
  • Thank you so much for these tips! This looks very good. If I wanted to increase the scaling factor to say 4, I'm assuming I should also change the translate factor. Also...say we have 2 components. Component A is larger than Component B. However, if I do two separate zooms to A and B, they should look the same size (after the zoom) and then when I zoom back out they should go back to the way they were before (different sizes). Therefore, I think I need to do some calculations based on component size for the zoom factor or something like that. Let me know if that made any sense.
    – erebel55
    Commented Mar 29, 2012 at 22:39
  • I will edit original question to include this, sorry for long read.
    – erebel55
    Commented Mar 29, 2012 at 22:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.