假设我使用 SVG 文件作为图标。带有外边框的复杂绘图
<svg x="0" y="0"
width="425.197px" height="425.197px" viewBox="0 0 425.197 425.197">
<image id="logo" x="0" y="0" width="425.197px" height="425.197px" xlink:href="logo.svg"/>
<image id="border" x="0" y="0" width="425.197px" height="425.197px" xlink:href="logo-border.svg"/>
</svg>
我可以在悬停时轻松隐藏边框:
svg:hover image#border {
display: none;
}
但我无法更改填充颜色:
svg:hover image#logo {
fill: #FFFFFF;
}
有没有办法或者我应该改变我的导入方法(使用对象,iframe,...)?