Javascript 为什么在Raphaeljs中，在设置旋转后，鼠标会将对象重置为它'；s初始位置

注意：请参见此处的演示代码：

我有一组对象，我在点击蓝色方块时旋转，效果很好。集合中的每个对象都附加了一个悬停事件，该事件使对象设置颜色更改和缩放的动画，以在鼠标进入和离开时给人一种增长和收缩的印象。但是，正如您在演示中看到的，缩放会使对象重置为其原始位置，并且如果对象先前悬停在旋转上，也会对旋转产生有趣的效果

我的问题是，我是否可以旋转对象集，并且在旋转后仍然具有对象的缩放效果，而不将其重置为原始位置，我假设鼠标上方的变换不正确，如果有人能为我指出正确的方向，我将不胜感激

---

编辑新的小提琴链接…

经过进一步研究，我想我理解了这个问题

在Raphael中绘制路径时，它是画布上的一个设置位置，在执行旋转时，它是在该设置位置上应用的变换。当我们应用缩放变换时，将触发悬停事件，这将清除以前的任何变换，这就是对象返回其原始位置的原因

我提出的解决方案是，当我们执行悬停动画时，我们还需要执行任何当前应用的旋转，当旋转时，我们需要确保重置缩放。我还注意到，当旋转发生时，如果将鼠标悬停在块上，会出现一些奇怪的动画，可能需要在旋转时禁用鼠标悬停

请参阅JSFIDLE链接以获取更新的代码，下面我概述了我的更改

轮换：

blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

鼠标悬停：

this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

鼠标移出：

this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

---

我不确定这样做是否正确，但如果有人有任何补充或更好的解决方案，请发表评论或回答

在进一步研究后，我想我理解这个问题

在Raphael中绘制路径时，它是画布上的一个设置位置，在执行旋转时，它是在该设置位置上应用的变换。当我们应用缩放变换时，将触发悬停事件，这将清除以前的任何变换，这就是对象返回其原始位置的原因

我提出的解决方案是，当我们执行悬停动画时，我们还需要执行任何当前应用的旋转，当旋转时，我们需要确保重置缩放。我还注意到，当旋转发生时，如果将鼠标悬停在块上，会出现一些奇怪的动画，可能需要在旋转时禁用鼠标悬停

请参阅JSFIDLE链接以获取更新的代码，下面我概述了我的更改

轮换：

blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);

鼠标悬停：

this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);

鼠标移出：

this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);

---

我不确定这是否是正确的方法，但如果有人需要添加任何内容或提供更好的解决方案，请发表评论或回答

能否更新给定链接中的代码？除了创建纸面对象之外，它不包含任何代码。对不起，我的错误，应该立即更新。请更新给定链接中的代码好吗？除了创建纸质对象之外，它不包含任何代码。对不起，我的错，现在应该更新了。我花了很多时间试图帮助您，文档说您可以使用el.transform（“”）清除任何转换；所以我试着用鼠标移过去，然后用鼠标移出，我认为你所做的肯定会帮助大多数人。我还注意到，如果你放置一个对象并旋转它，如果你想移动它，如果你移除变换，移动对象并重新应用变换，你会为自己省去一大堆痛苦。否则，旋转对象的整个坐标系都会改变。我花了很多时间试图帮助您，文档中说您可以使用el.transform（“”）清除任何变换；所以我试着用鼠标移过去，然后用鼠标移出，我认为你所做的肯定会帮助大多数人。我还注意到，如果你放置一个对象并旋转它，如果你想移动它，如果你移除变换，移动对象并重新应用变换，你会为自己省去一大堆痛苦。否则，旋转对象的整个坐标系将更改。