Using CSS to transition the fill property of an SVG path on hover
I'm including an SVG image file on my page within an object
tag, like this:
<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:
<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:
<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?
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.
Instead if you use CSS to set the color, the transition will behave as expected
So all I had to do to make the transition work is give the #europe
a starting fill to transition from.
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.
Or, doing it inline can be more convenient ( 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).
上一篇: CSS3隐藏过渡
下一篇: 使用CSS转换悬停时SVG路径的填充属性