SVG

Question

正如您在下面的 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 状态？

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

SVG - 多边形悬停无法正常工作