title: Set SVG attribute with javascript using variables
body: <p>I want to make an SVG element pan-able, it seems to be possible by only manipulating the first 2 values of the viewBox attribute. I cant figure out however if it's possible to use variables inside setAttribute. </p>
  
  <p>Here is my js code so far:</p>
  
  <pre><code>function panSvg(event) {
      var x = event.clientX - 498;
      var y = event.clientY - 183;
      //show coordinates in a &lt;p&gt; element
      document.getElementById("opf").innerHTML = "X: " + x + " Y: " + y;
      //make viewBox react to mouse movement
      document.getElementById("svag").setAttribute("viewBox", y x 100 100);   
  }
  </code></pre>
  
  <p>the html:</p>
  
  <pre><code>&lt;svg id="svag" onmousemove="panSvg(event)" width="600" height="600" viewBox="0 0 100 100"&gt;
  </code></pre>
  
  <p>I know or feel that x and y in the place of user defined left and right corner values (where there is originally 0 0 in the html) kinda hurts, but maybe I just need proper syntax? (For now I only want to see if it does something with the viewBox, I didn't figure out yet how to set x and y for proper panning).
  I saw way too complex solutions for zooming, which I achieved rather easily, I hope there is an elegant solution for this too.</p>