0

MySQLデータベースからSVGパスを取得し、raphaeljs.comのスクリプトを使用して形状を描画するコードを書いています。onmouseoverプロパティに問題があります。各図形にカーソルを合わせると、塗りつぶしの色を変えたいのですが、いずれかの図形にカーソルを合わせると、最後に描画された図形に色が付けられ、Iの図形ではなくなります。ホバリングしています。

データに含まれる形状を描画するJS関数のコードは次のとおりです。

function drawShapes(data,geolevel,transparent){
    $.each(data, function(code,shape){
        var contour = shape.contour.split(" ");
        attributes = {};
        attributes["fill"] = (transparent ? "none" : shape.fillcolor);
        attributes["fill-opacity"] = "0.75";
        attributes["stroke"] = shapeProperties[geolevel]["stroke"];
        attributes["stroke-width"] = shapeProperties[geolevel]["stroke-width"];

        index = shapeProperties[geolevel]["prefix"] + code;
        shapes[index] = drawPath("M " + contour.join(" ") + " z").attr(attributes);
        shapes[index].fill = shape.fillcolor;
        if (!transparent) {
            shapes[index][0].onmouseover = function () {
                shapes[index].attr({fill: hoverfill});
            };
            shapes[index][0].onmouseout = function () {
                shapes[index].attr({fill: shapes[index].fill});
            };
        }
    });
}

shapePropertiesタイプに応じた形状のプロパティを含むグローバル変数（オブジェクト）です。

私のマウスオーバーの周りに何か問題がありますか？詳細については、私のスクリプトはこのデモに大まかに基づいています：http: //raphaeljs.com/australia.html

前もって感謝します！

4

1 に答える 1

1

この行：

index = shapeProperties[geolevel]["prefix"] + code;

グローバル変数を宣言しているように見えますが、これが問題の原因である可能性があります。var関数に範囲が限定されるように、キーワードを使用します。

于 2012-04-20T08:30:45.723 に答える