Animation 捕捉SVG动画现有矩阵

我用它来创建一个简单的纸牌游戏。我从文件中加载了抽屉卡，并使用矩阵转换将它们移动到特定位置

它的svg元素现在看起来有点像这样：

<g id="card11" inkscape:label="#g3908" transform="matrix(1.5621,0,0,1.5621,625.1085,529.3716)" cardposition="4" style="visibility: visible;" class="card inhand hand-4 ofplayer1">...</g>

function animateTo(object, x, y, scaleX, scaleY, time) {
        object.animate({transform: "t100,100"}, time);//this one I tried to use to understand how snap animations works
    }

或者像这样：

<g id="card11" inkscape:label="#g3908" transform="matrix(1.5621,0,0,1.5621,625.1085,529.3716)" cardposition="4" style="visibility: visible;" class="card inhand hand-4 ofplayer1">...</g>

function animateTo(object, x, y, scaleX, scaleY, time) {
        object.animate({transform: "t100,100"}, time);//this one I tried to use to understand how snap animations works
    }

这是我的问题-当它设置动画时，它总是首先删除对象的动画矩阵，然后从它的原始位置开始设置动画，该位置为空矩阵，对象将不具有变换属性。 例如，当我尝试：

var matrix = object.transform().localMatrix;
object.animate({transform: matrix}, time);

我希望它不会做任何事情，但我的对象会在左上角的空白矩阵上闪烁，并将动画设置到它应该停留的位置

我做错了什么？我需要将该对象从某个矩阵状态设置为另一个状态（理想情况下，每个对象都是相同的状态）。这有可能吗？就像我可以指定开始变换属性一样

---

谢谢。

根据伊恩的建议，我已经习惯于转移字符串：

object.animate({transform: matrix.toTransformString()}, time);

但当然，我也必须在以前的转换中使用它

object.attr({transform: added.toTransformString()});//this
//object.transform(added);//instead of this

然而，获取局部矩阵仍然如预期的那样有效。动画现在可以工作了，我可以使用matrix.translate-相对移动对象或对象。动画{transform:T100100}，时间

我还可以直接修改矩阵的a、b、c、d、e、f属性。或者使用transform:t100100

它起作用了

---

谢谢

我可能不会尝试设置矩阵的动画，因为各种原因，它们通常会成为一个问题，并且不会完全按照您的想法去做，即使在它们工作时也是如此。尝试设置变换字符串的动画，但应该可以。如果没有，则发布JSFIDLE。