title: Simple translate with snap.svg
body: <p>I just started looking into animating svg graphics and it seems very complex.</p>
  
  <p>Im stuck on a seemingly simple problem. I want to animate a  element to a new place, but i want to do it over the set time. </p>
  
  <p>When i change i try with my current code i get a matrix attribute that appears, but i am unable to modify it, Does anyone know how to animate a object from the left to the right of a set amount of time.</p>
  
  <pre><code>                 window.onload = function () {
                       var s = Snap(100, 100);
                       Snap.load("http://new.beresponsive.co.za/wp-content/themes/responsive/flatui/images/icons/responsive.svg", function (f) {
  
                           redSomething = f.select("#phone");
  
                           redSomething.hover(function () {
                               redSomething.animate({
                                   'transform': 'matrix(3.333, -0.000, 0.000, 3.333, 66.667, 66.667)'
                               }, 2000);
                           });
  
                           s.append(f);
                       });
  
                   };
  </code></pre>