我在一个对象标记的我的页面上包括一个SVG图像文件，像这样： <object type="image/svg+xml" data="linkto/image.svg"> <!-- fal
...我在一个对象标记的我的页面上包括一个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不会处理它，并且转换不会褪色。
相反，如果使用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 =属性)。
. ..