Question

我在object标记内的网页上添加了一个SVG图片文件，如下所示：

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

有问题的图片是世界地图，我希望当鼠标悬停在fill上时转换group属性，在这种情况下我按大陆分组我的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>

但我无法通过CSS过渡让fill颜色渐渐淡出，颜色会立即改变，有人可以解释这个吗？

Answer 1

为了转换/淡出，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=属性）。

Answer 2

请注意，要在HTML文档中通过CSS为SVG设置样式，必须将SVG嵌入页面的HTML中，即，通过<object>或{{1}嵌入SVG不能正常工作}，或者通过CSS中的<img>等。

将其嵌入HTML时，您可以像使用HTML选择器设置HTML元素样式一样，对所有元素进行样式设置，以匹配要设置样式的元素并对其应用适当的样式。除了background-image外，还有很多其他SVG属性，它们也是CSS属性。可以在SVG specification或MDN上找到它们的列表。

为了使过渡生效，必须在CSS中定义开始值和结束值。因此，与其通过fill属性（fill）定义填充颜色，不如通过fill="#FAFAFA"属性来定义填充颜色，如下所示：

style

或通过打包在SVG内<path style="fill: #FAFAFA;" d="..."/>元素中的CSS规则：

<style>

在两种情况下，您都可以通过您提到的CSS规则转换值。

将SVG嵌入HTML的优势在于，您可以在用于HTML的样式表中进行样式设置，因此可以定义页面的HTML和嵌入式SVG之间共享的样式。

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

2 个答案: