捕獲被另一個透明形狀阻擋的形狀的鼠標懸停事件

Question

我有一些透明的重疊橢圓（如下所示）。

我突出顯示了mouseover上的每個橢圓，但不可能高亮顯示許多橢圓，因爲已經在其上繪製了其他橢圓。

從我有限的SVG的知識，有三種解決方案：

• 找到某種方式，只能檢測到每個橢圓形的邊緣鼠標懸停。
• 使用貝塞爾曲線繪製橢圓。
• 重新排列省略圖。我不知道如何做到這一點，或者如果甚至有可能以這種方式解決這個問題。

任何幫助非常感謝！

Answer 1

在SVG對象區域僅無論是畫在屏幕上。所以，從理論上講，你的橢圓只能在他們的筆畫上才能形成。如果情況並非如此，那麼你可能會用none（或許是rgba(0,0,0,0)？）以外的東西來設置填充。

您也可以將設置懸停在g而不是橢圓上。

這裏你可以看到一個例子：http://jsfiddle.net/r65E9/

ellipse { 
    stroke: #fff; 
    stroke-width: 1; 
    fill: none; 
} 

ellipse:hover { 
    stroke: #f66; 
}