Question

这是我的小提琴，它完美地运行http://jsfiddle.net/demo_Ashif/tmQ2H/

//
var rsrGroups = [Dist1,Dist2];

for (var i = 0, len = rsrGroups.length; i <= len; i++) {

    var el = rsrGroups[i];

    el.mouseover(function() {
        this.toFront();
        this.attr({
            cursor: 'pointer',
            fill: '#990000',
            stroke: '#fff',
            'stroke-width': '2'
        });
        this.animate({
            scale: '1.2'
        }, 200);
    });
    el.mouseout(function() {
        this.animate({
            scale: '1.05'
        }, 200);
        this.attr({
            fill: '#003366'
        });
    });
    el.click(function() {
        this.animate({
            fill: 'green'
        }, 200);
    });

}
//

但我的index.html页面中没有运行相同的代码。同样在Chrome和Firefox中。我不明白这个错误。请有人解决它。

Answer 1

您在小提琴中使用了非常旧的 RaphaelJS 版本——1.5.2。您应该使用 2.1.0，您可能在浏览器中，因此出现错误。

问题在于 Dist1 和 Dist2 是集合，而不是元素，它们不直接接受事件。但是没有必要这样做，因为每组只有一个项目。只需将变量直接分配给 path 对象：

var Dist1 = rsr.path("m 184.17891,318.14557...")
var Dist2 = rsr.path("m 352.66606,280.9633...")

其他一些错误：

Raphael 的参数颠倒了：应该是 var rsr = Raphael('rsr', 0, 0, 612, 792)，有 x 和 y，然后是 width 和 length
您的 for 循环从零索引的两项数组的索引 2 开始。无论如何，最好使用 rsrGroups.forEach(function(el) {...

在 Raphael 2.1.0 中，您不能直接为比例设置动画。简单的修复：

this.animate({
    transform: "s1.2"
}, 200);

这是一个有效的 fiddle，但请花点时间看看我做了什么——我在你的代码有问题的地方注释掉了。

（如果您打算继续使用它，我写了 O'Reilly book on RaphaelJS，并向您保证此时的任何版税都可以忽略不计，所以我不会在这里赚钱！）

js代码和svg路径在浏览器中不起作用

1 个答案: