无法在 y 轴上向下移动对象 - Raphael、Javascript、SVG

【问题标题】：Can't move object down in y axis - Raphael, Javascript, SVG无法在 y 轴上向下移动对象 - Raphael、Javascript、SVG
【发布时间】：2014-03-11 00:52:54
【问题描述】：

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

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

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

但我随后尝试通过更改 y 值将其向下移动，但这只会将其进一步向上推：我试过了：

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

和

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

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

不胜感激。谢谢

【问题讨论】：

标签： javascript animation svg raphael vector-graphics

【解决方案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 属性来完成)。

Raphael 的documentation on transformations 简洁得令人遗憾，但您可能会在那里找到一些有趣的材料。

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

【讨论】：