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

Question

我在object标签中包含了一个SVG图像文件,如下所示:

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

有问题的图像是一张世界地图,我想fill在鼠标悬停在a上时转换属性group,在这种情况下我按大陆分组我的SVG,所以南美看起来像这样:

<g id="south_america">
    <path fill="#FAFAFA" d="(edited for brevity)"/>
</g>

我可以fill通过在SVG文档顶部使用以下CSS来使属性在悬停时更改:

<style>
#south_america path {
    transition: fill .4s ease;
}
#south_america:hover path {
    fill:white;
}
</style>

但是我无法通过fillCSS过渡使颜色渐渐消失,颜色会立即改变,有人可以对此有所了解吗？

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>或<img>在 HTML 中或通过background-imageCSS 中等嵌入它是行不通的。

当它嵌入到 HTML 中时，您可以像设置 HTML 元素的样式一样设置其所有元素的样式，使用 CSS 选择器来匹配要设置样式的元素，并向其应用适当的样式。除此之外，fill还有许多其他 SVG 属性，它们也是 CSS 属性。它们的列表可以在SVG 规范或MDN中找到。

为了使过渡正常工作，必须在 CSS 中定义起始值和结束值。因此，不需要通过fill属性 ( fill="#FAFAFA") 定义填充颜色，而是需要通过style属性定义填充颜色，如下所示：

<path style="fill: #FAFAFA;" d="..."/>

<style>或者通过打包在SVG 元素中的CSS 规则：

<style type="text/css">
  #south-america > path {
    fill: #FAFAFA;
  }
</style>

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

在 HTML 中嵌入 SVG 的优点是，您可以在用于 HTML 的样式表中进行样式设置，这样您就可以定义在页面的 HTML 和嵌入的 SVG 之间共享的样式。