title: SVG rotation using Javascript
body: <p>I have created an SVG image in an HTML page, and now I want to move the SVG shapes about using
  JavaScript buttons. The JSFiddle for my application is here : <a href="http://jsfiddle.net/johndavies91/xwMYY/" rel="noreferrer">http://jsfiddle.net/johndavies91/xwMYY/</a></p>
  
  <p>The buttons have been displayed but their functions aren't being displayed upon clicking the buttons.</p>
  
  <p>The functions' codes are as follows;</p>
  
  <pre><code>function rotatex() {
  document.getElementById("inner-arrow").setRotate(45,NativeCenterX,NativeCenterY)
  }
  function rotatey() {
  document.getElementById("middle-arrow").setRotate(45,NativeCenterX,NativeCenterY)
  }
  function rotatez() {
  document.getElementById("outer-arrow").setRotate(45,NativeCenterX,NativeCenterY)
  }
  </code></pre>
  
  <p>and their corresponding buttons;</p>
  
  <pre><code>&lt;input id="button1" type="button" value="Rotate Inner Short Arrows 45*"
          onclick="rotatex()"/&gt;
  &lt;input id="button1" type="button" value="Rotate Middle Short Arrows 45*"
          onclick="rotatey()"/&gt;
  &lt;input id="button1" type="button" value="Rotate Outer Short Arrows 45*"
          onclick="rotatez()"/&gt;
  </code></pre>
  
  <p>I am trying to rotate them around the shapes' origin. Could someone explain to me
  why this code isn't working. Thanks</p>