悬停不适用于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

与其在SVG元素上使用hover伪选择器，不如在包含元素上使用它。例如：

a:hover svg {
  fill: #1793d1;
}

注意：您需要删除其他选择器和样式，才能使其如图所示起作用；如果您真的想对选择器过分具体，可以，但是我不建议这样做。 a:hover .Fill-1过多。

Answer 2

将鼠标悬停在包含元素上时，可以更改路径的fill，在这种情况下可以是<svg/>：

svg:hover path {
  fill: blue
}

这里是fiddle

Answer 3

您需要从路径中删除class="Fill-1"。接下来，将样式（大家都提到过）应用于svg元素。

body{background:black;}
svg{fill:white;}
svg:hover{fill:skyBlue;}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet"><g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"><path d="M135 2552c-40-14-81-45-105-80l-25-36 0-1156 0-1156 24-35c13-19 40-46 60-60l36-24 1155 0 1155 0 36 24c20 14 47 41 60 60l24 35 0 1156 0 1156-24 35c-13 19-40 46-60 60l-36 24-1140 2c-627 0-1149-2-1160-5zm550-446c58-27 78-47 100-99 53-128-35-261-182-274-94-9-175 33-214 109-24 46-25 128-2 175 47 99 187 141 298 89zm1148-521c128-27 217-95 276-214 52-103 61-188 61-592l0-359-195 0-194 0-3 368-3 367-25 44c-45 80-113 109-206 90-60-12-112-53-143-114-20-38-21-56-21-397l0-358-195 0-195 0 0 575 0 575 195 0 195 0 0-76 0-76 51 57c101 110 233 146 402 110zm-1053-590l0-575-195 0-195 0 0 575 0 575 195 0 195 0 0-575z"></path></g></svg>