SVG - 多邊形懸停不工作correclty

正如你可以在GIF見下文，:hover狀態不正常，當我移動鼠標光標從底部多邊形上部多角工作：SVG - 多邊形懸停不工作correclty

在Chrome和Firefox中測試 - 結果是一樣的。

如何在鼠標光標進入邊界後，在右邊顯示SVG多邊形輪到:hover狀態？

2016-03-21 Limon Monte

我記得讀書的地方早些時候'填充：none'影響指針的事件，它是更好地使用'補：transparent.'嘗試，看看是否有幫助。它似乎爲我[這裏]（https://jsfiddle.net/36Lcyvyw/1/）工作，但我不能張貼作爲答案，因爲我沒有一個堅實的解釋。 – Harry

不要使用填充：透明，使用指針事件：可見 –

@Harry哇，我不知道爲什麼，但你的建議像一個魅力工程！如果你可以將它彈出一個答案，我會接受:) –

沒有fill來捕捉指針事件，所以它失敗。

一個簡單的透明填充可以糾正它。

polygon { 
 
    stroke-width: 1; 
 
    stroke: red; 
 
    fill: transparent; 
 
} 
 
polygon:hover { 
 
    fill: red; 
 
}

<svg viewBox="0 0 999 799"> 
 
    <polygon points="445,161 345,174 500,10" /> 
 

 
    <polygon points="445,161 345,174 500,270" /> 
 
</svg>

如由羅伯特Longson

pointer-events: visible提到是優選和高性能溶液。

polygon { 
 
    stroke-width: 1; 
 
    stroke: red; 
 
    fill: none; 
 
    pointer-events: visible; 
 
} 
 
polygon:hover { 
 
    fill: red; 
 
}

<svg viewBox="0 0 999 799"> 
 
    <polygon points="445,161 345,174 500,10" /> 
 

 
    <polygon points="445,161 345,174 500,270" /> 
 
</svg>

來源

2016-03-21 17:21:42

不要使用填充：透明，使用指針事件：可見 –

@RobertLongson，因爲它的工作方式與我所預期的一樣，我認爲這是對我的問題的正確答案。 –

@limonte這是一個**答案，但它不是最好的**答案，因爲它是非標準的，並且比指針事件的性能特徵更差 –

SVG - 多邊形懸停不工作correclty

回答

相關問題