SVG - 多边形悬停无法正常工作[重复]

Posted 2023-03-06

【中文标题】SVG - 多边形悬停无法正常工作[重复]

【英文标题】：SVG - polygon hover does not work correclty [duplicate]

【发布时间】：2016-07-08 08:23:08

【问题描述】：

正如您在下面的 gif 中看到的，当我将鼠标光标从底部多边形移动到上部多边形时，:hover 状态无法正常工作：

polygon 
  stroke-width: 5;
  stroke: red;
  fill: none;


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>

[jsfiddle]

在 Chrome 和 Firefox 中测试 - 结果是一样的。

如何在鼠标光标进入其边界后立即实现SVG多边形转:hover状态？

【问题讨论】：

我记得之前在某处读到fill: none 会影响指针事件，最好使用fill: transparent. 试试看是否有帮助。 here 似乎对我有用，但我无法将其发布为答案，因为我没有可靠的解释。

不要使用填充：透明，使用指针事件：可见

@Harry 哇，我不知道为什么，但你的建议就像一个魅力！如果您可以将其添加到答案中，我会接受它:)

@limonte：Paulie 已经补充过了，所以我不再重复了 :) 顺便看看 Robert 的建议（他比我更了解 SVG :)）跨度>

谢谢@RobertLongson 我会看看你的建议！

【参考方案1】：

没有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>

正如罗伯特·朗森所说

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>

【讨论】：

不要使用填充：透明，使用指针事件：可见

@RobertLongson 因为它在我的情况下像预期的那样工作，我认为这是我问题的正确答案。

@limonte 这是一个的答案，但它不是最佳的答案，因为它是非标准的并且比指针事件具有更差的性能特征

@RobertLongson 看来你是对的。我通过添加pointer-events: visible; 得到了预期的行为，再次感谢您的解释。