如何让悬停只悬停在 SVG 文件上，而不是它旁边的空白处？

【问题标题】：How to I get the hover to only hover over an SVG file and not the empty space beside it?如何让悬停只悬停在 SVG 文件上，而不是它旁边的空白处？
【发布时间】：2022-01-02 23:21:49
【问题描述】：

我有一个三角形的 SVG 文件，我试图在悬停时更改颜色，以及作为可点击的链接。当我将鼠标悬停在它上面时，它确实会这样做，但是由于它不是一个矩形，所以即使 svg 没有直接悬停在上面，空白空间也会触发悬停功能。

有没有办法让不可见的空间不触发悬停？这是 SVG 的特定限制吗？如果这可以解决，如果图像是png而不是svg，它的分辨率是否相同？

【问题讨论】：

请发minimal reproducible example
嗨。您能否将您的代码添加到问题中，以便我们查看问题所在？

标签： html css svg hyperlink hover

【解决方案1】：

<svg> 将始终在 HTML 页面上占据一个正方形空间。

在此示例中，<path> 的父元素是锚元素，悬停样式位于 <path> 上。

path:hover {
  fill: orange;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 5" width="200">
  <a href="#">
    <path fill="navy" d="M 3 0 L 0 5 L 6 5 Z"/>
  </a>
</svg>

【讨论】：