我在一个对象标记的我的页面上包括一个SVG图像文件，像这样：
<object type="image/svg+xml" data="linkto/image.svg"> <!-- fallback image in CSS --> </object>
有问题的图像是一个世界地图，我想转换填充属性，当鼠标悬停在一个组，在这种情况下，我已经将大陆分组我的SVG，所以南美洲看起来像这样：
<g id="south_america">
<path fill="#FAFAFA" d="(edited for brevity)"/>
</g>
我可以通过使用下面的CSS在我的SVG文档的顶部获取填充属性更改悬停：
<style>
#south_america path {
transition: fill .4s ease;
}
#south_america:hover path {
fill:white;
}
</style>
但是我不能得到填充颜色淡入与CSS转换，颜色只是瞬间改变，任何人可以照亮这个请吗？
解决方法
为了转换/淡出，CSS需要一个起始值和一个结束值。
因为您使用SVG属性fill =“#FAFAFA”设置路径的颜色，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 =属性)。
