Can'；t在y轴上向下移动对象-Raphael、Javascript、SVG

在SVG动画中向下移动图像时遇到问题

使用animate（）函数，我首先向上移动图像，效果很好：

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

但我试图通过改变y值将其向下移动，但它只会进一步将其向上推： 我试过：

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

及

带引号和不带引号，但它们都会将图像向上移动

---

非常感谢您的帮助。谢谢

没有完整的参考代码是不可能确定的，但我愿意打赌，这个问题归结为对坐标属性和变换之间差异的误解。当您为图像的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属性实现的）

拉斐尔的作品简明扼要，但你可能会在那里找到一些有趣的材料

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

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