您好我的svg路径有问题。我有一条路，在这条路上，我有另一条路。现在，当我越过第一条路径时，将显示第二条路径。问题是，在超过第一条路径后，显示第二条路径，但是当我越过第二条路径时，此路径是隐藏的。这导致第二条路径闪烁，因为当Im在第二条路径上时，鼠标不在第一条路径上，因此它隐藏了第二条路径。隐藏它后，鼠标位于第一条路径上，因此它显示第二条路径，依此类推。因此，只有当我移动鼠标时，第二条路径才会闪烁。这是我的代码：
这里我获取所有路径并声明2个地图（不需要此问题）：
//var raphael = requires("../../node_modules/Raphael/raphael.js");
var paper = Raphael('map');
var map = getPaths(paper, { fill: "#333", stroke: "#000", "stroke-width": 1, "stroke- linejoin": "round" });
var playerColor = {"player1":"rgb(255,51,51)", "player2":"rgb(51,51,255)", "player3": "rgb(153,51,255)", "player4":"rgb(51,255,51)", "player5":"rgb(255,255,51)", "player6":"rgb(255,51,153)"};
var countryMap = {"0":{units:0, owner:"player1"}, "1":{units:0, owner:"player4"}, "2": {units:0, owner:"player1"}, "3":{units:0, owner:"player6"}, "4":{units:0, owner:"player5"}, "5":{units:0, owner:"player5"}, "6":{units:0, owner:"player4"}, "7":{units:0, owner:"player6"}, "8":{units:0, owner:"player6"}, "9":{units:0, owner:"player3"},
"10":{units:0, owner:"player4"}, "11":{units:0, owner:"player1"}, "12":{units:0, owner:"player5"}, "13":{units:0, owner:"player4"}, "14":{units:0, owner:"player5"}, "15":{units:0, owner:"player3"}, "16":{units:0, owner:"player5"}, "17":{units:0, owner:"player2"}, "18":{units:0, owner:"player6"}, "19":{units:0, owner:"player2"},
"20":{units:0, owner:"player3"}, "21":{units:0, owner:"player2"}, "22":{units:0, owner:"player1"}, "23":{units:0, owner:"player3"}, "24":{units:0, owner:"player1"}, "25":{units:0, owner:"player4"}, "26":{units:0, owner:"player2"}, "27":{units:0, owner:"player3"}, "28":{units:0, owner:"player2"}, "29":{units:0, owner:"player6"},
"30":{units:0, owner:"player2"}, "31":{units:0, owner:"player1"}, "32":{units:0, owner:"player4"}, "33":{units:0, owner:"player5"}, "34":{units:0, owner:"player4"}, "35":{units:0, owner:"player1"}, "36":{units:0, owner:"player5"}, "37":{units:0, owner:"player6"}, "38":{units:0, owner:"player6"}, "39":{units:0, owner:"player3"},
"40":{units:0, owner:"player2"}, "41":{units:0, owner:"player3"}
};
现在我遍历所有路径来修改它们并添加鼠标事件：
for (var countryCode in map) {
(function (countryPath) {
countryPath.attr({opacity: 0.6});
var colour = Raphael.getRGB(playerColor[countryMap[countryPath.id].owner]);
countryPath.attr('fill', colour);
在这里，我得到包含路径的方框，并在中心放置一个圆圈：
var box = countryPath.getBBox(true);
var x = box.x+box.width/2;
var y = box.y+box.height/2;
在这里，我添加了大圆圈和两个较小的圆圈，在大圆圈的左侧和右侧：
var circle = paper.circle(x,y,8).attr({
"fill":colour,
"stroke": "#000",
"stroke-width": "1"
});
var circlePlus = paper.circle(x+13,y, 4).attr({
"fill":colour,
"stroke": "#000",
"stroke-width": "1"
});
var circleMinus = paper.circle(x-13,y, 4).attr({
"fill":colour,
"stroke": "#000",
"stroke-width": "1"
});
var plusButton = paper.text(x+13,y,"+");
var minusButton = paper.text(x-13,y-0.5,"-");
var units = paper.text(x,y,countryMap[countryPath.id].units);
如果此路径没有发生任何事件，我将隐藏两个小圆圈和内部文本：
circlePlus.hide();
circleMinus.hide();
plusButton.hide();
minusButton.hide();
现在，我将事件添加到路径和三个圈子中：
plusButton.mousedown = function() {
countryMap[countryPath.id].units += 1;
units.attr('text', countryMap[countryPath.id].units);
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
};
minusButton.mousedown = function() {
if(countryMap[countryPath.id].units != 0) {
countryMap[countryPath.id].units -= 1;
}
units.attr('text', countryMap[countryPath.id].units);
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
};
问题出在这里，实际上当鼠标位于圆圈上并且它不在路径上时，因此会触发mouseout事件：
circlePlus.mouseover = function() {
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
};
circleMinus.mouseover = function() {
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
};
circle.mouseover = function() {
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
};
countryPath.mouseover(function(event) {
countryPath.animate({fill: colour, stroke: colour, "stroke": "#000", opacity: "1" }, 300);
circle.animate({fill: colour, stroke: colour, "stroke": "#000" }, 300);
circlePlus.show();
circleMinus.show();
plusButton.show();
minusButton.show();
paper.safari();
});
这是隐藏两个小圆圈的路径的mouseout事件。如前所述，问题是两个圆圈的闪烁，因为此代码会阻止鼠标移出和鼠标悬停事件。
countryPath.mouseout(function(event) {
countryPath.animate({fill: colour, stroke: "#000", opacity: "0.6" }, 300);
circle.animate({fill: colour, stroke: "#000","stroke-width": 1}, 300);
circlePlus.hide();
circleMinus.hide();
plusButton.hide();
minusButton.hide();
paper.safari();
});
countryPath.mousedown(function() {
});
countryPath.transform("s3, 3, 100, 100");
circle.transform("s3, 3, 100, 100");
units.transform("s3, 3, 100, 100");
circlePlus.transform("s3, 3, 100, 100");
circleMinus.transform("s3, 3, 100, 100");
plusButton.transform("s3, 3, 100, 100");
minusButton.transform("s3, 3, 100, 100");
})(map[countryCode]);
问题在于：
谢谢