Nested SVG elements for graphic centering confuse SVGPan

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Look at attached file with SVGPan.js in same folder
2. Try to zoom
3. Try to pan

What is the expected output? What do you see instead?
Zoom and pan should work fine but they do not.  Instead, image is translated to 
the bottom left.

What version of the product are you using? On what operating system?
Current (March 7th, 2012)
Recent Chromium, recent Chrome and IE9 all show same issue.

Please provide any additional information below.
This file contains nested SVG elements in order that the graphic is initially 
centered in the browswer window.  I suspect this is confusing SVGPan.  For 
convenience, file contents below:

<svg height="100%" id="outer" style="position=absolute;display=block;" 
version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">
 <svg x="50%" y="50%" overflow="visible" id="inner">
  <script xlink:href="/static/SVGPan.js">
  </script>
  <g id="viewport" transform="scale(1) translate(-224, -128)">
   <rect height="256" style="fill:grey;stroke:black;" width="448"/>
  </g>
 </svg>
</svg>

Original issue reported on code.google.com by j...@mustardtechnology.com on 7 Mar 2012 at 9:40

Attachments:

• explore.svg

[GoogleCodeExporter]

John @ Talos solved this issue for me by some edits to my SVG, see 
https://github.com/talos/jquery-svgpan/issues/3

Original comment by j...@mustardtechnology.com on 8 Mar 2012 at 12:03