Javascript 使用snap.svg进行简单转换

我刚开始研究svg图形的动画，它看起来非常复杂

我陷入了一个看似简单的问题。我想将一个元素设置为新位置的动画，但我想在设定的时间内完成

当我修改当前代码时，会出现一个矩阵属性，但我无法修改它。有人知道如何在设定的时间内从左到右设置对象的动画吗

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

                 };

---

我觉得这感觉很复杂，因为你在使用矩阵，我不明白你为什么需要在这里。“简单”的解决方案就是这样做

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

在字符串“t”=translate中，100,0表示向右移动x100

---

注意，如果已经应用了变换，可以尝试将字符串添加到当前字符串的末尾，但是如果已经旋转了字符串或其他内容，并且希望它向右移动，则会有点麻烦

谢谢你，你知道你将如何反转翻译，这样当你将鼠标悬停在关闭位置时，它将返回到原来的位置，它将只是动画到原点，所以resSomething.animate（{transform:'t0,0'}，2000）；在动画完成之前，您可能需要检查如果从“悬停关闭”切换到“悬停”，会发生什么情况，因为有时会出现微妙的位。