javascript - 使用“attr”与“animate”使用节点 ID 更改 Raphael 对象

Question

我正在构建一个应用程序，该应用程序使用 Raphael 根据从 json 提要读取的值在地图上绘制圆圈。每个圆形节点都有一个 ID，然后我用它来调用它并更改它的属性。选择一个新变量会改变圆圈的大小和颜色。我可以使用 JQuery 的 attr 方法更改大小，但不能设置动画。

我为每个圈子分配了一个 ID：

circle.raphael.node.id = [thisCircle]

我可以使用属性方法更改每个圆圈的大小和颜色，因此：

$(thisCircle).attr({
r : [new radius]
fill : [new color]
});

但我无法使用 JQuery 的 animate 方法对其进行动画处理：

$(thisCircle).animate({
r : [new radius],
fill : [new color]
}, 200);

我错过了什么？

score 4 · Accepted Answer

你为什么不通过它自己的animate方法为 raphael 对象设置动画？：

circle.animate({
    r : newRadius,
    fill : newColor
},200);

这是一个演示如何为 raphael 圆形对象设置动画：

.
在同一个演示中，您会看到我添加了一个不必要的迷你 jquery 插件，让您可以通过本机 jquery 动画方法为 raphael svg 对象设置动画，如下所示：

$('#the-id-of-the-svg-node').animate({
    r : newRadius,
    fill : newColor
},200);

score 0 · Accepted Answer

尝试使用$('#'+thisCircle).animate...。[thisCircle]是底层元素的id，为了将它传递给 jQuery，你必须指定一个选择器来选择元素本身。

2 回答 2