使用snap.svg进行简单翻译

Question

I just started looking into animating svg graphics and it seems very complex.

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.

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.

                 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);
                     });

                 };

Answer 1

I think its feeling complicated, as you are using a matrix, and I don't see why you need that here. The 'simple' solution would be just to do

redSomething.animate({ transform: 't100,0' }, 2000);

In the string 't' = translate, and 100,0 is move x 100 to the right.

Note, if you already have a transform applied, you could try adding the string on the end of the current one, but its a bit trickier if its rotated already or something and you want it to move right.