我正在绘制 2 条 SVG 路径,就像 Google Maps 对方向所做的那样。
我遇到的问题是,与第二条路径的边界框重叠的第一条路径的部分不会触发 mouseover、mouseout 或 click 事件。即使事件处理程序位于路径 dom 元素上,当鼠标位于路径边界框内的任何位置时,事件似乎也会触发。
有没有办法避免这种情况?在 Chrome、Safari 和 Opera 上我没有这个问题。它只是 Firefox 中的 SVG。
我创建了一个测试示例。当您将鼠标移到一个圆圈上时,它应该会提醒您它的颜色。您会看到,如果您从最右侧接近绿色圆圈,它会起作用,因为它位于红色圆圈容器的 300 像素宽度之外。但是,如果您从绿色圆圈的顶部或底部接近,您将一无所获。现在在 Chrome/Safari/Opera 中尝试相同的操作,您会看到它按预期工作。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG embedded inline in XHTML</title>
<script type="text/javascript">
window.onload = function () {
var red = document.getElementById('red-circle');
var green = document.getElementById('green-circle');
red.onmouseover = function (e) {
alert('red mouse over');
};
green.onmouseover = function (e) {
alert('green mouse over');
};
};
</script>
</head>
<body>
<svg:svg style="position: absolute; top: 0px; left: 110px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle id="green-circle" cx="150px" cy="100px" r="50px" fill="green" />
</svg:svg>
<svg:svg style="position: absolute; top: 0px; left: 0px; z-index: 0;" version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle id="red-circle" cx="150px" cy="100px" r="50px" fill="#ff0000" />
</svg:svg>
</body>
</html>