使用CSS转换悬停时SVG路径的填充属性

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

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

有问题的图像是世界地图，当鼠标悬停在一个group时，我想转换fill属性，在这种情况下，我按照大陆将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颜色，颜色只是瞬间改变，任何人都可以在这个灯光上点亮一下吗？

---

为了转换/淡入，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=属性）。

链接地址: http://www.djcxy.com/p/27417.html

上一篇: Using CSS to transition the fill property of an SVG path on hover

下一篇: out display property