Firefox 3.6 命中测试重叠 SVG 形状

发布于 2024-09-07 01:25:16 字数 1696 浏览 5 评论 0原文

我正在绘制 2 个 SVG 路径，就像 Google 地图对方向所做的那样。

我遇到的问题是，第一条路径与第二条路径的边界框重叠的部分不会触发鼠标悬停、鼠标移出或单击事件。即使事件处理程序位于路径 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>

原文

I am drawing 2 SVG paths much like Google Maps does with directions.

The problem I have is that the section of the first path that is overlapped by the bounding box of the second path won't fire the mouseover, mouseout or click events. Even though the event handlers are on the path dom element the events seem to fire when the mouse is anywhere inside the the bounding box of the path.

Is there anyway to avoid this? On Chrome, Safari and Opera I don't have this problem. It is only SVG in Firefox.

I've created a test example. When ever you move the mouse over a circle it is supposed to alert you of it's colour. You will see that if you approch the green circle from the very right side it works because it falls outside the 300px width of the red circle container. However if you approach from the top or bottom of the green circle you will get nothing. Now try the same thing in Chrome/Safari/Opera and you will see that it works as expected.

<?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>

分享到QQ

分享到微博