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

【问题标题】：SVG - polygon hover does not work correclty [duplicate]SVG - 多边形悬停无法正常工作[重复]
【发布时间】：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>

在 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>

【讨论】：