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

Question

5

如下所示，当我将鼠标光标从下面的多边形移动到上面的多边形时，: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状态？

- Limon Monte

2

我记得早些时候在某个地方读到过fill：none会影响指针事件，最好使用fill: transparent。试一下看是否有帮助。这对我来说似乎有用这里，但我无法将其作为答案发布，因为我没有一个确定的解释。 - Harry

2

不要使用 fill: transparent，而是使用 pointer-events: visible。 - Robert Longson

@Harry 哇，我不知道为什么，但你的建议非常有效！如果你能把它写成答案，我会接受的 :) - Limon Monte

1

@limonte：Paulie已经添加了，所以我不会重复了 :) 顺便看看Robert的建议（他对SVG的了解比我多 :)) - Harry

谢谢 @RobertLongson，我会看一下你的建议！ - Limon Monte

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

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

正如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>