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

回答

相关问题