SVG-多边形悬停无法正常工作 [英] SVG - polygon hover does not work correclty

问题描述

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

As you can see on gif below, :hover state does not work properly when I move the mouse cursor from bottom polygon to upper polygon:

[jsfiddle]

[jsfiddle]

在Chrome和Firefox中进行了测试-结果相同.

Tested in Chrome and Firefox - the result is the same.

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

How can I achieve SVG polygon turn :hover state on right after mouse cursor enters its borders?

推荐答案

没有fill可以捕获指针事件，因此失败.

There is no fill to catch the pointer event so it fails.

一个简单的透明填充即可对其进行纠正.

A simple transparent fill corrects it.

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>

罗伯特·朗森(Robert Longson)提到的

As mentioned by Robert 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>

这篇关于SVG-多边形悬停无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！