title: SVG zoom with mouse wheel inside HTML document
body: <p>I'm attempting to implement a functionality in an HTML document which allows users to drag and zoom in an embedded SVG 'box'...</p>
  
  <p>I found <a href="http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/" rel="noreferrer">this</a>, but soon enough realised that that script only works with plain SVG files...</p>
  
  <p>Keep in mind that I'm a programmer who has been working exclusively with assembly language for the past half year. Jumping from that to this abstract environment is a huge step.</p>
  
  <p>Right now I'm trying to figure out just the zooming part:</p>
  
  <p>So I made this HTML file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Forum Risk! v0.0.1&lt;/title&gt;
      &lt;script type="text/javascript" src="svglib.js" &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- SVG embedded directly for example purpose... I'm planning to use &lt;embed&gt; --&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" onmousewheel="mouseWheelHandler(e);"&gt;
          &lt;g id="viewport" transform="matrix(1,0,0,1,200,200)" &gt;
              &lt;circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the contents of <code>svglib.js</code> are:</p>
  
  <pre><code>var scrollSensitivity = 0.2
  
  function mouseWheelHandler(e) {
  
      var evt = window.event || e;
      var scroll = evt.detail ? evt.detail * scrollSensitivity : (evt.wheelDelta / 120) * scrollSensitivity;
  
      var transform = document.getElementById("viewport").getAttribute("transform").replace(/ /g,"");
  
      var vector = transform.subString(transform.indexOf("("),transform.indexOf(")")).split(",")
  
      vector[0] = (parseInt(vector[0]) + scroll) + '';
      vector[3] = vector[0];
  
      document.getElementById("viewport").setAttribute("transform",
          "matrix(".concat(vector.join(), ")"));
  
      return true;
  
  }
  </code></pre>
  
  <p>I used <a href="http://www.javascriptkit.com/javatutors/onmousewheel.shtml" rel="noreferrer">http://www.javascriptkit.com/javatutors/onmousewheel.shtml</a> for reference.</p>
  
  <p>But the problem is that as soon as I open the HTML file with Chrome, the SVG shows up, but nothing happens at all when I scroll with my mouse wheel...</p>
  
  <p>Have I understood all of this completely wrong?</p>
  
  <h3>UPD</h3>
  
  <p>Fixed version <a href="http://jsfiddle.net/dfsq/GJsbD/" rel="noreferrer">http://jsfiddle.net/dfsq/GJsbD/</a></p>