1

Google マップのルート案内と同じように、2 つの SVG パスを描画しています。

私が抱えている問題は、2 番目のパスのバウンディング ボックスが重なっている最初のパスのセクションが、mouseover、mouseout、またはクリック イベントを発生させないことです。イベント ハンドラーはパス 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>
4

1 に答える 1

0

これは Firefox 4 で再現できます。できることは、イベント ハンドラーを DOM 階層の上位レベルにインストールし、イベントのtargetフィールドを使用してグラフィック要素を識別することです。

于 2010-12-30T09:44:23.880 に答える