使用CSS在悬停时转换SVG路径的fill属性

Question

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

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

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

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

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

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

但我无法通过CSS过渡使fill颜色淡入，颜色立即变化，任何人都可以对此有所了解吗？

Answer 1

为了转换/淡入淡出，CSS需要一个起始值和一个结束值。 因为您使用SVG属性fill="#FAFAFA"设置路径的颜色，所以CSS不会处理它并且转换不会消失。

相反，如果您使用CSS设置颜色，则转换将按预期运行

因此，我必须做的就是让过渡工作给#europe一个开始填充来过渡。

 path { transition: fill .4s ease; }
 /* set fill for before and for during hover */
 #europe       path { fill: red; }
 #europe:hover path { fill: white; }

这是一个有效的JSFiddle。

---

或者，内联它可以更方便（style=""）：

<path style="fill: #FAFAFA;" d="..."/>

只是为了让CSS进行淡入淡出，它需要处理CSS /内联样式的开始和结束值（而不是使用SVG fill=属性）。