Question

我正在绘制2条SVG路径，就像谷歌地图的方向一样。

我遇到的问题是第一条路径中与第二条路径的边界框重叠的部分不会触发mouseover，mouseout或click事件。即使事件处理程序位于路径dom元素上，当鼠标位于路径边界框内的任何位置时，事件似乎也会触发。

无论如何要避免这种情况吗？在Chrome，Safari和Opera上我没有这个问题。它只是Firefox中的SVG。

我已经创建了一个测试示例。当您将鼠标移动到圆圈上时，它应该提醒您它的颜色。您将看到，如果您从最右侧开始处理绿色圆圈，则它会起作用，因为它超出了红色圆形容器的300px宽度。但是，如果您从绿色圆圈的顶部或底部接近，您将得不到任何结果。现在在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>

Answer 1

我可以使用Firefox 4重现这一点。您可以做的是在DOM层次结构中的更高级别安装事件处理程序，并使用事件的target字段来区分图形元素。

Firefox 3.6测试重叠的SVG形状

1 个答案: