Firefox 3.6命中測試重疊SVG形狀

我繪製了2個SVG路徑，非常類似於Google地圖的路線。Firefox 3.6命中測試重疊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>

來源

2010-06-21 Alex

我可以用Firefox 4重現此你可以做的是在DOM上位階層安裝事件處理程序，並使用該事件的target領域的圖形元素之間的挑剔。

來源

2010-12-30 09:44:23 Ringding

這仍然無法正常工作，因爲它使用圍繞形狀的邊框。不是形狀確切的周長。我最終要做的是手動對父元素進行測試。即跟蹤鼠標光標的x和y值並查看它是否與多邊形相交。 – Alex 2011-01-08 04:59:57

你一定在做錯事，因爲它確實以這種方式工作。它適用於http://code.google.com/p/svg-edit/，我已經開始了一個類似的私人（實際上是公司）項目，也是這樣做的。 – Ringding 2011-01-09 11:50:48

Firefox 3.6命中測試重疊SVG形狀

回答

相關問題