更改导入的 svg 文件的填充颜色

Question

假设我使用 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、...）？

Answer 1

将悬停逻辑放在图像文件本身看起来像这样的位置...

#logo {
    fill: #FFFFFF;
}

然后也从<image> 更改为<iframe> 或<object>，因为<image> 标签不接收指针事件。

基本上，如果您想象位图图像能够做什么，那么 SVG 图像也能够做同样的事情。由于 png 或 gif 图像不是交互式的，因此 SVG 图像也不是交互式的，因此您对图像功能的思维导图不会受到影响。