title: move rotated SVG element
body: <p>So,I have a SVG rect that I can move to the mouse position,with mouseonmove.</p>
  
  <p>It works fine,but when I come to rotate it,the movement is good,but It have a strange offset based on the rotated angle.I guess something is wrong at the cos/sin code,but I can't get what is wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container = document.getElementById("container"); 
  var rect = document.getElementById("rect");
  var grados = document.getElementById("grados");
  var group = document.getElementById("group");
  grados.addEventListener("change",rotate);
  container.addEventListener("mousemove", move);
  
  var angle = 0;
  var radian = angle * Math.PI / 180;
  var cos = Math.cos(radian);
  var sin = Math.sin(radian);
  
  function move(e){
  
      var x = ((e.offsetX * cos) + (e.offsetY * sin));
      var y = ((-e.offsetX * sin) + (e.offsetY * cos));
      rect.setAttribute('x',x);
      rect.setAttribute('y',y);
  }
  
  function rotate(e){
      console.log(e);
      group.style.transform='rotate('+e.target.value+'deg)';
      angle = e.target.value;
      radian = angle * Math.PI / 180;
      cos = Math.cos(radian);
      sin = Math.sin(radian);
       
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  ROTATE&lt;input id="grados" type="number" value="1"&gt;
  &lt;svg id="container"style="width: 400px;height:400px;border:1px solid black;"&gt;
  
  &lt;svg&gt;
  &lt;g id="group"style="transform:rotate(0deg);transform-origin:50% 50%;"&gt;
  &lt;rect id="rect"  x="20" y="5" width="50px" height="50px" style="fill:red;stroke-width:3;stroke:blue"&gt;&lt;/rect&gt;
      &lt;/g&gt;
   &lt;/svg&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  
  Link to jsdfiddle: <a href="https://jsfiddle.net/es179Lzn/1/" rel="nofollow">https://jsfiddle.net/es179Lzn/1/</a> </p>
  
  <p>Thanks</p>