Hi,

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:

<div....>
<svg....>
<defs>...</defs>
<text...../>
<rect..../>
</svg>
</div>

I obtain:

<div....>
<svg....>
<defs>...</defs>
<g>
<text...../>
<rect..../>
</g>
</svg>
</div>

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.
Many thanks,

Abraham