我在页面上的object标记中包含了一个SVG图像文件，如下所示：
<object type="image/svg+xml" data="linkto/image.svg">
<!-- fallback image in CSS -->
</object>所讨论的图像是一张世界Map，我希望在鼠标悬停在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>但是我不能让fill的颜色在CSS过渡中淡入，颜色只是瞬间改变，有人能解释一下吗？
2条答案
按热度按时间9wbgstp71#
为了过渡/淡入淡出，CSS需要一个起始值和一个结束值。
因为您使用SVG属性
fill="#FAFAFA"设置了路径的颜色，所以CSS不会处理它，过渡也不会淡出。相反，如果使用CSS设置颜色，则过渡将按预期方式运行
因此，要使过渡工作正常进行，我所要做的就是给予
#europe提供一个开始填充以进行过渡。这是一个可以正常工作的JSFiddle。
或者，内联执行可能更方便（
style=""）：为了让CSS执行淡入淡出，它需要以CSS/inline样式处理开始值和结束值（与使用SVG
fill=属性相反）。7ajki6be2#
请注意，要在HTML文档中通过CSS对SVG进行样式化，SVG必须嵌入到页面的HTML中，即，通过
<object>或<img>将其嵌入到HTML中或通过background-image等将其嵌入到CSS中并不起作用。当它被嵌入到HTML中时，你可以像设计HTML元素一样设计它的所有元素，使用CSS选择器匹配你想要设计样式的元素，并应用合适的样式。除了
fill，还有很多其他的SVG属性，它们也是CSS属性。它们的列表可以在SVG规范或MDN中找到。为了使过渡生效，必须在CSS中定义开始值和结束值，因此，不需要通过
fill属性（fill="#FAFAFA"）定义填充颜色，而需要通过style属性定义填充颜色，如下所示：或者通过打包在SVG内的
<style>元素中的CSS规则：在这两种情况下，您都可以通过前面提到的CSS规则转换值。
在HTML中嵌入SVG的优点是，您可以在用于HTML的样式表中进行样式设置，因此您可以定义在页面的HTML和嵌入的SVG之间共享的样式。