小编Dav*_*ght的帖子

我在object标签中包含了一个SVG图像文件,如下所示:

<object type="image/svg+xml" data="linkto/image.svg">
   <!-- fallback image in CSS -->
</object>

有问题的图像是一张世界地图,我想fill在鼠标悬停在a上时转换属性group,在这种情况下我按大陆分组我的SVG,所以南美看起来像这样:

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

我可以fill通过在SVG文档顶部使用以下CSS来使属性在悬停时更改:

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

但是我无法通过fillCSS过渡使颜色渐渐消失,颜色会立即改变,有人可以对此有所了解吗？