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

I'm including an SVG image file on my page within an object tag, like this:

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

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

The image in question is a world map, i want to transition the fill property when the mouse hovers over a group, in this case I've grouped my SVG by continent, so South America looks something like this:

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

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

I can get the fill property to change on hover by using the following CSS at the top of my SVG document:

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

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

But I can't get the fill colour to fade in with a CSS transition, the colour just changes instantly, can anyone shed light on this please?

但是我无法通过CSS过渡来填充填充颜色，颜色会立即改变，有人可以解决这个问题吗？

1 个解决方案

#1

In order to transition/fade, CSS needs a starting value and an ending value.
Because you set the color for the path using the SVG attribute fill="#FAFAFA", CSS doesn't process it and the transition doesn't fade.

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

Instead if you use CSS to set the color, the transition will behave as expected

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

So all I had to do to make the transition work is give the #europe a starting fill to transition from.

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

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

Here's a working JSFiddle.

这是一个有效的JSFiddle。

Or, doing it inline can be more convenient (style=""):

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

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

Just in order for CSS to do your fading, it needs to handle the start and end values in CSS/inline style (as opposed to using the SVG fill= attribute).

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

#1