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;
}

有没有办法或者我应该更改我的导入方法（使用object，iframe，...）？

Answer 1

将悬停逻辑放在图像文件中，它看起来像这样......

#logo {
    fill: #FFFFFF;
}

然后也从<image>更改为<iframe>或<object>，因为<image>标记不会收到指针事件。< / p>

基本上，如果你想象一下位图图像的能力，那么SVG图像能够做同样的事情。由于png或gif图像不是交互式的，因此SVG图像也不是这样，因此您的图像能力的心智图不会受到损害。

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

1 个答案: