html - 悬停不适用于 SVG 路径的未填充区域

Question

我有一个 portfilio ( https://portfolio.umairstem.now.sh/) 主页，其中有 svg 图标。当鼠标悬停在图标上时，我希望它变成浅蓝色。问题是当鼠标越过 SVG 中的间隙时，效果不会出现。如果我不清楚，下图显示了我的意思。我试图添加一个 background 或 padding 但这会取代页面上的元素。

我的 CSS 如下:

svg {
    display: inline-block;
    width: auto;
    height: 5vw;
    min-height: 2rem;
    max-height: 4rem;
    scale: 0.5;
}

.Fill-1:hover{//Fill-1 is the SVG class name
   fill: #1793D1;
}

Answer 1

您可以更改 fill悬停在包含元素上时的路径，在本例中可以是 <svg/> :

svg:hover path {
  fill: blue
}

这是一个 fiddle