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

【问题标题】：js code and svg path is not working in browserjs 代码和 svg 路径在浏览器中不起作用
【发布时间】：2013-11-20 21:48:13
【问题描述】：

这是我完美运行的小提琴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 中相同。我不明白这个错误。请有人解决它。

【问题讨论】：

描述预期的行为，描述你看到的行为。问一个具体的问题。
我的场景是，在鼠标悬停事件中，我将显示一些关于该地图区域的文本，例如 raphaeljs.com/australia.html 。但在“文本编辑器”中编辑 html 等之后，什么也没有发生。只有空白页。在完成全部工作之前，我只想检查 svg 路径和 raphael 悬停动画是否正常。在 jsfiddle 上可以（给定链接），但当我在浏览器中作为 html 页面打开时不行。
您是否收到任何 javascript 错误？
检查控制台是否有上述错误。首先检查你在 Raphael 中的加载是否正确，然后将 div 放在那里。
@zgood 和 lan 感谢您的合作。现在它已修复，但略有不同。 raphael.js 文件中存在错误。我复制库文件时可能有缺陷。

标签： html svg raphael

【解决方案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，并向您保证此时的任何版税都可以忽略不计，所以我不会在这里赚钱！）

【讨论】：