Sencha Premium Member
Ext.draw.Component surface zoom and pan
I'm trying to implement zooming and panning functionality using the SVGPan library (http://http://code.google.com/p/svgpan/). Zooming is achieved by the mouse wheel and panning by dragging the diagram. For this to work I need to wrap all sprite code within the svg element with a <g ../> element. So instead of the code generated by Ext.draw:
I managed to do this using the JQuery wrapAll function like so: $('#someId svg > *[id]').wrapAll('<g />'); I checked the SVG code with 'Inspect Element' in web developer tools and it looks ok.
The problem is that as soon as I wrap the sprites with <g>, they do not show up in my panel. Before wrapping, I would see the complete graphics diagram with all sprites that I added to the surface. When I save the modified code between <svg> and </svg> in a separate .svg file, I can view the diagram in a browser no problem.
I'd really appreciate it if somebody could help me out. Perhaps my approach is too complicated and there is a much simpler solution.