SVG - 多边形悬停不起作用

Question

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

[jsfiddle]

在Chrome和Firefox中测试过 - 效果相同。

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

Answer 1

没有fill来捕获指针事件，因此它失败了。

简单的透明填充可以纠正它。

＆＃13;

＆＃13;

polygon {
  stroke-width: 1;
  stroke: red;
  fill: transparent;
}
polygon:hover {
  fill: red;
}

＆＃13;

<svg viewBox="0 0 999 799">
  <polygon points="445,161 345,174 500,10" />

  <polygon points="445,161 345,174 500,270" />
</svg>

＆＃13;

＆＃13;

＆＃13;

如Robert Longson所述

pointer-events: visible是首选和效果解决方案。

＆＃13;

＆＃13;

polygon {
  stroke-width: 1;
  stroke: red;
  fill: none;
  pointer-events: visible;
}
polygon:hover {
  fill: red;
}

＆＃13;

<svg viewBox="0 0 999 799">
  <polygon points="445,161 345,174 500,10" />

  <polygon points="445,161 345,174 500,270" />
</svg>

＆＃13;

＆＃13;

＆＃13;