无法在y轴上移动对象 - Raphael，Javascript，SVG

Question

我无法在SVG动画中向下移动图像

使用animate（）函数我首先移动图像，工作正常：

greenBar1.animate({y: 200}, 200, 'elastic');

但是我接着尝试通过改变y值将其向下移动，但它只是进一步推动它：我尝试过：

greenBar1.animate({y:'-50'}, 200, 'elastic');

和

greenBar1.animate({y:'.50'}, 200, 'elastic');

有和没有引号，但他们都移动图像

非常感谢任何帮助。 谢谢

Answer 1

没有完整的参考代码是不可能确定的，但是我愿意打赌这个问题归结为对坐标属性和变换之间差异的误解。 当您为图像的x或y属性设置动画时，Raphael将使用这些绝对值 - 当然，-50和.5在屏幕和SVG对象的坐标系中都“高于”200。 如果你想以这样的方式使用动画，使得对象的位置相对于它的起始位置（这就是你正在做的那样）被修改，那么试试这个：

greenBar1.animate(  { transform: [ "T", 0, -100 ] }, 200, 'elastic', 
                    function()
                    {
                        // note that the callback is invoked in the context of the animated element, so we can simply write...
                        this.animate( { transform: "" }, 200, 'elastic' );
                    } );

您可以指示SVG转换它，而不是更改元素的基本坐标，首先从其起始位置向上100个单位，然后“向下”返回其原始位置（这通过清除transform属性来完成）。

拉斐尔关于变换的文档令人遗憾，但你可能会发现一些有趣的材料。

如果这不能解决您的问题，请发布有关故障代码的小提琴或其他快照。