更改css与悬停的不透明度SVG

我的CSS有问题。

这是我的HTML：

这是我的CSS：

#navigation ul:nth-child(1) li a:hover {
text-shadow: 0px 0px 20px black;
opacity: 1.0;

}

.iconopacity {
    fill-opacity: 0.3;
}

.iconopacity:hover {
    pointer-events: all;
    fill-opacity: 0.7 !important;
}

这是我的svg文件：

我用插画家制作了图标。我想通过减少鼠标悬停在图标上时的透明度来使图标变暗。我尝试了：

.iconopacity:hover {
     fill-opacity: 0.7; 
}

但这没用。我也尝试了一堆其他的CSS选择器，例如：

  #navigation ul:nth-child(1) li a:hover .iconopacity { css here }

但它也不起作用。

我认为我在将鼠标悬停在链接上时选择了错误的CSS路径，但是问题也可能完全不同。

我认为使用javascript也可以解决问题，但是我不喜欢javascript，并且我认为使用CSS应该是可行的。

请帮我？:)