0

假设我使用 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,...)?

4

1 回答 1

0

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

#logo {
    fill: #FFFFFF;
}

然后从一个更改<image>为任一和<iframe><object>作为<image>标签不接收指针事件。

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

于 2013-10-18T11:04:56.263 回答