title: Zoom to different parts of SVG depending on mouse position
body: <p>So <a href="https://code.google.com/p/svgpan/" rel="nofollow noreferrer">I've found a script</a> which seems to do just that , but it zooms a <code>&lt;g&gt;</code> that wraps whole svg contents by applying a transformation matrix to it (though it doesn't zoom in Opera because of sniffing). Wrapping all lements in a <code>&lt;g&gt;</code> is not an option because I'm making an image viewer and different files may be loaded. </p>
  
  <p>Setting  <code>transform="matrix(...)"</code> on the root <code>&lt;svg&gt;</code> gives no effect. Setting <code>currentScale</code> on <code>&lt;svg&gt;</code> zooms the picture but does it from the top left corner, and not from the mouse position or from center of the image. And pan functionality also does not work since it seems impossible to drag the whole <code>&lt;svg&gt;</code> element.</p>
  
  <p>Manipulating the <code>viewBox</code> attribute seems to be helpful but it's really tricky to figure out the necessary values for it.</p>
  
  <p>So can you think of a way to do zoom and pan in such a context?</p>
  
  <p>You can download the <a href="http://files.myopera.com/SpShut/files/Opera%20SVG%20Viewer%20v1.3.2%20demo.wgt" rel="nofollow noreferrer">demo here</a>. Requires Opera to be installed on your computer.</p>